Question

我在项目的现有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({ });

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

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的{{1}} / paste / cut而不是menu

如果你想要你可以用

捕获那些

keyboard

注意如果你从tinymce中捕获editor.on('paste', function(e) { console.debug('paste event'); }); editor.on('cut', function(e) { console.debug('cut event'); });和cut，你可能不应该从keyup处理这些事件。我所做的就是只有当钥匙不是paste＆amp;的钥匙时才能保存。 cut即：

paste

并从keyup事件中调用此函数。这样你就可以节省自己在cut＆amp; amp;粘贴

注意很快就会发现/** * 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(); },发生的任何style changes NOT 都会触发这些事件..

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

Answer 3

这对我有用：

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 4

以下内容将捕获＆＃34; keyup＆＃34;和其他更改事件（复制，粘贴，中心等）：

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 5

我在tinymce 4.x

中使用它

<style>

<强>解释

on（＆＃34;更改＆＃34;）用于检测鼠标事件的更改，如果您单击工具栏图标或从菜单中选择。它还能够检测键盘事件，但只能在失去焦点（非实时）后才能检测到。

on（＆＃34; keyup＆＃34;）用于检测实时键盘事件的变化

Answer 6

试试这个：

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 here

Answer 7

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

Answer 8

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

因此，我们同时使用更改和 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);
    }
});

Answer 9

这项工作对我来说很好，所有条件关键，剪切，复制，粘贴

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

Answer 10

以上解决方案将不会检测是否使用了tinymce updo按钮。不幸的是，这两者都不是，但这在语义上是正确的。

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

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

Answer 11

我正在使用TinyMCE 5.4.1

我同时尝试了很多事件，例如'键入，复制，粘贴，剪切'，以及某些特定于表的对象，例如' newrow '，'< strong> newcell ”，但最后，真正捕获所有更改的组合是“ input NodeChange”（它涵盖了第一个事件的所有情况以及更多内容）

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

Answer 12

为了检测 TinyMCE 使用的文本区域上的表单更改，我在 editor.targetElm

上触发了一个事件

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

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

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

Answer 13

您好我尝试过使用此功能：

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

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

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

如何检测TinyMCE的变化？

13 个答案:

编辑：