jquery - 如何检测 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({ });

你能说出如何发现变化，或者有什么更好的主意吗？

score 71 · Accepted Answer

我迟到了，但为了将来参考，这里是您在 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());
       });
   }
});

score 34 · Accepted Answer

对于 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来自menukeyboard

如果你愿意，你可以用

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

                });

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

                });

注意如果您从 tinymce 捕获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都不会触发这些事件。

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

score 15 · Accepted Answer

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

score 13 · Accepted Answer

这对我行得通：

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在部分事件中找到

score 10 · Accepted Answer

以下将捕获“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());
}

score 7 · Accepted Answer

我在 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("change") 用于在您单击工具栏图标或从菜单中选择时检测鼠标事件的更改。它还能够检测到键盘事件，但只有在失去焦点之后（不是实时）。

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

score 3 · Accepted Answer

尝试这个：

tinyMCE.init({
   setup : function(ed) {
          ed.onChange.add(function(ed, l) {
                  var editorContent = l.content;    // editorContent will hold the values of the editor
                  alert(editorContent);
          });
   }
});

单击此处获取参考

score 3 · Accepted Answer

我正在使用 TinyMCE 5.4.1

我同时尝试了很多事件，比如' keyup、copy、paste、cut '和特定于表格的人，比如' newrow '、' newcell '，但最后，真正捕捉到所有变化的组合是'input NodeChange'（它涵盖了第一个事件的所有情况等等）

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

score 2 · Accepted Answer

我们发现 change 事件有时只在按下回车后触发；它似乎与撤消处理有关。此外，keyup 事件会在内容未更改时触发，例如按下shift或CMD-A时。

因此，我们同时使用change和keyup，并将最后处理的值与当前值进行比较，以检测真正的变化。

此解决方案也适用于菜单项的剪切、粘贴和修改。

//Sometimes does not fire unless enter is pressed
editor.on('change', () => {
    var value = editor.getContent();
    if (value !== editor._lastChange) {
        editor._lastChange = value;
        window.console.log(editor._lastChange);
    }
});

//Sometimes fires even if content did not change
editor.on('keyup', () => {
    var value = editor.getContent();
    if (value !== editor._lastChange) {
        editor._lastChange = value;
        window.console.log(editor._lastChange);
    }
});

score 2 · Accepted Answer

在所有条件下，这对我来说都很好，剪切，复制，粘贴

    setup: function (editor) {
        editor.on('KeyUp', function(e){
            alert(editor.getContent());
         });
}

score 2 · Accepted Answer

上述解决方案不会检测是否使用了 tinymce updo 按钮。不幸的是，这也不会，但它在语义上更正确。

if (tinymce.activeEditor.isDirty()) {
    alert("Your content is changed.");
}

http://archive.tinymce.com/wiki.php/api4:method.tinymce.Editor.isDirty

score 0 · Accepted Answer

为了检测 TinyMCE 使用的 textarea 上的表单更改，我触发了一个事件editor.targetElm

setup: function(editor) {
  editor.on('change', function(e){
    editor.targetElm.dispatchEvent(new Event('change'));
  })
},

现在我可以以通常的方式在表单验证或其他脚本中收听事件

inputElement.onchange = (e) => {
  // do something
};

score -1 · Accepted Answer

嗨我试过用这个：

setup : function(ed) {
    ed.onChange.add(function() {
        $('#changed').val(1);
    });
}

这是用值 1 更新隐藏字段“已更改”，以便当用户尝试关闭窗格或离开页面时，他们会被告知他们有未保存的数据。

我的错是这仅在进行 2 次或更多更改时才有效 - 例如，如果我注意到我没有完成句号“。” 回去添加这个然后由于某种原因单击关闭我将能够离开页面而不会被警告更改

jquery - 如何检测 TinyMCE 的变化？

13 回答 13

编辑：

Related

Reference