如何检测TinyMCE的变化？

Question

我在我的项目(PHP,Codeigniter)中的现有HTML表单中添加了TinyMCE(版本4.0.2)编辑器.我的最终目标是在包含TinyMCE编辑器的表单中发生任何更改时启用表单提交按钮.我只能使用除TinyMCE编辑器之外的表单来完成它.我无法检测到TinyMCE的变化.

我想检测按键时是否发生任何变化.我已经看到,tinymce有一个像波纹管一样的onchange函数.

            setup : function(ed) {
            ed.onChange.add(function(ed, l) {
                console.debug('Editor contents was modified. Contents: ' + l.content);
            });

我在波纹管初始化函数中放置了上层设置代码,但没有找到输出.

tinymce.init({ });

你能说出如何发现变化,或者更好的想法吗？

Answer 1

我迟到了,但是为了将来参考这里是你如何在TinyMCE 4.X中做到这一点:

tinyMCE.init({
   setup:function(ed) {
       ed.on('change', function(e) {
           console.log('the event object ', e);
           console.log('the editor object ', ed);
           console.log('the content ', ed.getContent());
       });
   }
});

Answer 2

对于Tinymce 4,它对我有用,

        editor.on('keyup', function(e) {
            alert('keyup occured');
            //console.log('init event', e);
            console.log('Editor contents was modified. Contents: ' + editor.getContent());
            check_submit(); //another function calling
        });

编辑:

请注意,keyup 不会捕获所有情况.例如copy/ paste/ cut来自menu而不是来自keyboard

如果你想要你可以捕获那些

editor.on('paste', function(e) {
                    console.debug('paste event');

                });

editor.on('cut', function(e) {
                    console.debug('cut event');

                });

注意 如果您捕获cut并paste从中获取,则可能不应该从keyup处理这些事件.我做的是只有当键不是cut&的键时才保存paste:

 /**
 * MCE keyup callback, update the master model selected attribute
 * 
 * @method tinyMCEKeyup
 */
 tinyMCEKeyUp : function(e) {
        console.log('tinymce:keyup');


         var ctrlDown = false;
         var ctrlKey = 17, vKey = 86, xKey = 88;


         if ((e.ctrlKey) && (e.keyCode === vKey)) {
             console.log('paste from keyboard')
             /* got here. do nothing. let paste event handle this one  */
             return;
         } else if ((e.ctrlKey) && (e.keyCode === xKey)) {
             console.log('cut from keyboard')
             /* got here. do nothing. let paste event handle this one  */
             return;
         }

         this.doSave();

},

并从keyup事件中调用此函数.通过这种方式,您可以节省自己在剪切和粘贴时执行两次操作

请注意,您很快就会发现任何style changes发生的事情menu都不会触发这些事件.

我仍在寻找捕捉风格变化的答案.

Answer 3

let editorChangeHandlerId;
tinymce.init({
    // ...
    setup: function(editor) {
        editor.on('Paste Change input Undo Redo', function () {
            clearTimeout(editorChangeHandlerId);
            editorChangeHandlerId = setTimeout(function() {
                console.log('changed');
            }, 100);
        });
    }
    // ,...
});

Answer 4

这对我行得通:

tinyMCE.init({
    setup : function(ed){
         ed.on('NodeChange', function(e){
             console.log('the event object ' + e);
             console.log('the editor object ' + ed);
             console.log('the content ' + ed.getContent());
         });
    }
});

也

ed.on('SaveContent', function(e) {  

要么

ed.on('submit', function(e) {

在章节中找到http://www.tinymce.com/wiki.php/api4:class.tinymce.Editor

Answer 5

以下内容将捕获"keyup"和其他更改事件(复制,粘贴,居中等):

tinymce.init({
    setup: function (ed) {
        ed.on('keyup', function (e) {
            tinyMceChange(ed);
        });
        ed.on('change', function(e) {
            tinyMceChange(ed);
        });
    }
});

function tinyMceChange(ed) {
    console.debug('Editor contents was modified. Contents: ' + ed.getContent());
}

Answer 6

我在tinymce 4.x中使用它

tinymce.init({
    selector: "#tinymce-textarea",
    setup : function(ed) {
        ed.on("change", function(e){
            $('#tinymce-livepreview').html(tinymce.activeEditor.getContent());
        });
        ed.on("keyup", function(){
            $('#tinymce-livepreview').html(tinymce.activeEditor.getContent());
        });
   }
});

说明:

on("更改")用于检测鼠标事件的更改,如果您单击工具栏图标或从菜单中选择.它还能够检测键盘事件,但只能在失去焦点(非实时)之后.

on("keyup")用于检测实时键盘事件的变化

Answer 7

我正在使用 TinyMCE 5.4.1

我尝试同时处理很多事件，例如“ keyup、复制、粘贴、剪切”以及特定于表的事件，例如“ newrow ”、“ newcell ”，但最后，真正捕获所有更改的组合是'input NodeChange'（它涵盖了第一个事件的所有情况以及更多）

editor.on('input NodeChange', function() {
   console.log('content updated');
});