Question

我们一直忙于将TinyMCE从3.x升级到4.2.5，并且无法阻止默认的ENTER操作发生。

我们的目标是在按下CTRL + enter时提交表单，重要的是提交应该在将新行添加到TinyMCE之前进行。 3.x分支允许我们将事件添加到队列的顶部：

// Important: inject new eventHandler via addToTop to prevent other events
tinymce.get('tinymce_instance').onKeyDown.addToTop(function(editor, event) {
    if (event.ctrlKey && event.keyCode == 13) {
        $("form").submit();
        return false;
    }
});

不幸的是，我们无法弄清楚如何将它再次添加到事件的顶部。

event.preventDefault()和event.stopPropagation()没有预期的效果，因为输入已经存在。奇怪的是它可以在其他键上工作，可以防止字母数字键。 http://jsfiddle.net/zgdcg0cj/

可以使用以下代码段添加事件：

tinymce.get('tinymce_instance').on('keydown', function(event) {
    if (event.ctrlKey && event.keyCode == 13) {
        $("form").submit();
        return false;
    }
});

问题：在我们的事件处理程序被调用之前，新行被添加到TinyMCE内容中，因此存储了不需要的输入。如何将事件添加到4.x分支的顶部，或者阻止换行？

Answer 1

通过event.preventDefault()函数上的setup附加keydown事件时，

init可以正常工作。

tinymce.init({
  selector:'textarea',
  setup: function (ed) {
    ed.on('keydown',function(e) {
        if(e.ctrlKey && e.keyCode == 13){
            alert("CTRL + ENTER PRESSED");
            e.preventDefault();
        }
    });
  }
});

这会阻止回车发生。 JsFiddle

修改

以上是一种方法，我找到了另一种实现结果的方法，根本不需要init。相反，我们创建一个新的Editor实例并绑定到我们的textarea，因为它具有id。

HTML

<form>  <textarea id='editor_instance_1'>A different way</textarea> </form>

JS

var ed = new tinymce.Editor('editor_instance_1', { settings: "blah blah" }, tinymce.EditorManager); //attach keydown event to the editor ed.on('keydown', function(e){ if(e.ctrlKey && e.keyCode == 13){ alert("CTRL + ENTER"); e.preventDefault(); } }); //render the editor on screen ed.render();

Answer 2

var init {
    ...,
    setup: function (ed) {
        ed.on('keydown', function (e) {
            if (e.ctrlKey && 13 === e.keyCode) {
                e.preventDefault();
                $("form").submit();
            }
        });
};

tinymce.init(init);

适用于tinyMCE 4.x

Answer 3

也许我迟到了，但这个答案适用于那些不能（或者不想）改变初始设置的人。我找到了以下方法：

var frame = document.getElementById('id_of_editor_iframe');
var iframeDocument = fr.contentWindow.document;
iframeDocument.addEventListener('keydown', function(e) {
    if (
        [38, 40, 13].indexOf(e.keyCode) > -1 //Enter and up/down arrows or whatever you want
    ) {

        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();

        // your code here
        return false;
    }
}, true);

它帮助我阻止了编辑器中的新行

防止在TinyMCE中输入默认键盘事件

3 个答案: