在 TinyMCE 编辑器问题中插入具有跨度的内容答案

【问题标题】：Inserting content with span in TinyMCE Editor problem在 TinyMCE 编辑器问题中插入具有跨度的内容
【发布时间】：2019-02-16 19:08:10
【问题描述】：

我一直在尝试将带有 span 标签的文本插入到光标所在的 TinyMCE 编辑器中，但是在按下 ENTER 后，我每次都会得到 span 标签。

这是我用按钮插入文本的功能：

function Insert(){
    tinymce.activeEditor.execCommand('mceInsertContent', false, '<span class="bgTest" data-prefix="ABC">This is a inserted text</span> ');
}

这是我的浏览器输出：Imgur

【问题讨论】：

您必须取消 Enter keydown 事件以防止 contenteditable 插入新的“行”并破坏您的代码。这部分的答案很多。
你能告诉我，如何取消它？
搜索“cancel enter key js”获取详情

标签： javascript jquery html tinymce

【解决方案1】：

因此，如果我理解正确，该功能可以与您的按钮配合使用。但是，当您在输入时单击 Enter 时，它无法正确呈现？

所以听起来输入键默认行为是这里的问题。您需要防止回车键的默认行为。你需要preventDefault()。

我没有更改您的Insert() 功能，因此它仍然可以与您的按钮一起使用。

但是我已经向.tinymce 添加了一个keydown 事件侦听器，它将preventDefault() 输入键的正常行为（即添加换行符）。然后你会触发你的Insert() 函数。

function Insert(){
    tinymce.activeEditor.execCommand('mceInsertContent', false, '<span class="bgTest" data-prefix="ABC">This is a inserted text</span> ');
}

document.querySelector(".tinymce").addEventListener("keydown", function(event) {
    if (event.keyCode === 13) {
        event.preventDefault();
        Insert();
    }
});

希望这会有所帮助。如果您需要更多帮助，请告诉我:)。

【讨论】：