如何检测TinyMCE中的变化? [英] How to detect changes in TinyMCE?

问题描述

我在项目(PHP，Codeigniter)中以现有HTML格式添加了TinyMCE(版本4.0.2)编辑器.我的最终目标是，如果包括TinyMCE编辑器在内的表单发生任何更改，则启用表单提交按钮.我只能使用TinyMCE编辑器以外的形式来执行此操作.我无法检测到TinyMCE的更改.

I added TinyMCE(version 4.0.2) editor in a existing HTML form in my project(PHP,Codeigniter). My final target is to enable the form submit button if any changes occur in the form including TinyMCE editor. I can do it only with the form except TinyMCE editor. I could not detect TinyMCE changes.

我想检测在按键时是否发生任何变化.我已经看到tinymce具有像下面这样的onchange函数.

I want to detect if any change occur when key up. I have seen that tinymce has an onchange function like bellow.

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

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

I putted upper setup code inside the bellow init function, but no output i have found.

tinymce.init({ });

您能告诉我们如何发现变化或任何更好的主意吗?

Can you tell how to detect change, or any better idea?

推荐答案

对于Tinymce 4它适用于我，

For Tinymce 4 it works for me,

        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
        });

请注意，键不会捕获所有案例.例如，menu中的copy/paste/cut，而不是keyboard

Note that keyup won't capture all cases. for example copy/paste/cut from menu and not from keyboard

如果需要，可以使用

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

                });

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

                });

注意 如果从tinymce捕获cut和paste，则可能不应该从keyup处理这些事件.我要做的是仅在键不是cut&的键时保存. paste即:

NOTE if you capture cut and paste from tinymce you should probably not process those event from keyup. What I did is to do save only if the keys are not keys for cut & paste i.e :

 /**
 * 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事件中调用此函数.这样一来，您就可以节省两次剪切和剪切动作.粘贴

and call this function from the keyup event. This way you will save yourself do some actions twice on cut & paste

注意，您很快就会发现，menu中发生的任何style changes也会不触发这些事件.

NOTE soon you will figure out that any style changes that happens from menu will NOT trigger those event as well..

我仍在寻找解决样式变化的答案.

I'm still looking for an answer to capture style change.

这篇关于如何检测TinyMCE中的变化?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！