javascript - 防止在 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() 在您通过 init 函数上的 setup 附加 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();
        }
    });
  }
});

这确实阻止了回车的发生。 JsFiddle

编辑:

以上是一种实现方法，我找到了另一种实现结果的方法，它根本不需要 init。相反，我们创建一个新的 Editor 实例并绑定(bind)到我们的文本区域，因为它有一个 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();