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

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()当您通过setuponinit函数附加 keydown 事件时有效。

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

这确实阻止了回车的发生。提琴手

编辑：

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

HTML

<form>
    <!--Select by ID this time -->
    <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();