如何检测TinyMCE的变化？
我在项目的现有HTML表单中添加了TinyMCE（版本4.0.2）编辑器（PHP，Codeigniter）。 我的最终目标是在包含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({ });
你能说出如何发现变化或更好的想法吗？
我迟到了，但是为了将来参考这里你是如何在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()); }); } });
对于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 不会捕获所有情况。 例如从menu copy / paste / cut而不是从keyboard copy
如果你想要你可以捕获那些
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事件中调用此函数。 通过这种方式，您可以节省自己在剪切和粘贴时执行两次操作
请注意，您很快就会发现menu中发生的任何style changes都不会触发这些事件。
我仍在寻找捕捉风格变化的答案。
这对我行得通：
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
以下内容将捕获“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()); }
我在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”）用于检测实时键盘事件的变化
试试这个：
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); }); } });
点击这里的Rreference
我们发现改变事件有时只在按下回车后触发; 它似乎与撤销处理联系在一起。 此外，当内容未更改时（例如按下shift或CMD-A时）会触发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); } });
这项工作对我来说很好，在所有condtion 键，剪切，复制，粘贴
setup: function (editor) { editor.on('KeyUp', function(e){ alert(editor.getContent()); }); }
tinymce.init({ // ... setup: function(editor) { editor.on('Paste Change input Undo Redo', function () { if (editorChangeHandler) {clearTimeout(editorChangeHandler);} editorChangeHandler = setTimeout(function() { console.log('changed'); }, 100); }); } // ,... });
嗨，我试过用这个：
setup : function(ed) { ed.onChange.add(function() { $('#changed').val(1); }); }
这是为了更新值为“已更改”的隐藏字段，以便当用户尝试关闭窗格或离开页面时，会通知他们有未保存的数据。
我的错是这只有在做出2次或更多次更改时才有效 – 例如，如果我注意到我没有完成一次完全停止“。” 回去添加这个然后由于某种原因点击关闭我将能够离开页面而不会被警告更改