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

Question

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

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

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

这是我的浏览器输出：Imgur

Answer 1

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

所以听起来回车键的默认行为就是问题所在。您需要防止回车键的默认行为。你需要 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();
    }
});

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

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

Inserting content with span in TinyMCE Editor problem

html

javascript

jquery

tinymce