防止在 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

当您通过 init 函数上的 setup 附加按键事件时，

event.preventDefault() 有效。

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

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

编辑：

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

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

也许我来晚了，但这个答案是为那些不能（或不想）更改 tinymce 的初始化设置的人准备的。我找到了以下方法：

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 中输入默认键盘事件

Prevent enter default keyboard event in TinyMCE

javascript

tinymce

tinymce-4