如何避免TinyMCE富文本编辑器插入合并字段时出现元素嵌套

问题重现 #

我使用以下代码向TinyMCE编辑器插入合并字段：

var wc = `<em class="${t} shortcode" data-unique-id="${rId}" data-control="merge-field">[[${text}]]</em>`;
tinymce.get('document-template').execCommand('mceInsertContent', false, wc);

但每次插入新的<em>元素时，都会嵌套进之前的<em>元素内部，生成如下嵌套结构：

<em class="Standard shortcode"
    data-unique-id="ATK8N"
    data-control="merge-field">[[Legal Full Name]]<em class="Standard shortcode"
        data-unique-id="A8TI8"
        data-control="merge-field">[[ Company Address Country]]<em class="DocumentSender shortcode"
            data-unique-id="HCFMG"
            data-control="merge-field">[[ Last Name]]</em>
    </em>
</em>

需要实现每个<em>元素独立，不互相嵌套的效果：

<em class="Standard shortcode" data-unique-id="ATK8N" data-control="merge-field">[[Legal Full Name]]</em>
<em class="Standard shortcode" data-unique-id="A8TI8" data-control="merge-field">[[ Company Address Country]]</em>
<em class="DocumentSender shortcode" data-unique-id="HCFMG" data-control="merge-field">[[ Last Name]]</em>

解决方案 #

核心原因是光标位于已有<em>元素内部时，mceInsertContent会默认在当前上下文插入内容，导致嵌套。以下是三种可行的解决方法：

方法1：插入前清除当前格式 #

在插入新字段前，先移除当前的<em>格式，让光标跳出嵌套的上下文：

var editor = tinymce.get('document-template');
// 移除当前光标所在的em格式，确保光标不在em元素内
editor.execCommand('mceRemoveFormat', false, 'em');
// 插入新的合并字段
var wc = `<em class="${t} shortcode" data-unique-id="${rId}" data-control="merge-field">[[${text}]]</em>`;
editor.execCommand('mceInsertContent', false, wc);

方法2：手动将光标移到em元素外部 #

通过DOM定位找到当前光标所在的合并字段<em>元素，将光标移到该元素的后方：

var editor = tinymce.get('document-template');
var selection = editor.selection;
var currentNode = selection.getNode();

// 向上遍历DOM，找到最近的合并字段em元素
while (currentNode && currentNode.nodeName !== 'BODY' && !currentNode.hasAttribute('data-control')) {
    currentNode = currentNode.parentNode;
}

if (currentNode && currentNode.hasAttribute('data-control')) {
    // 将光标设置到当前em元素的下一个节点位置
    selection.setCursorLocation(currentNode.nextSibling, 0);
}

// 插入新的合并字段
var wc = `<em class="${t} shortcode" data-unique-id="${rId}" data-control="merge-field">[[${text}]]</em>`;
editor.execCommand('mceInsertContent', false, wc);

方法3：插入后强制调整光标位置 #

插入字段后，直接将光标移到编辑器内容的末尾，避免后续插入时嵌套：

var editor = tinymce.get('document-template');
var wc = `<em class="${t} shortcode" data-unique-id="${rId}" data-control="merge-field">[[${text}]]</em>`;
// 插入合并字段
editor.execCommand('mceInsertContent', false, wc);
// 将光标移到编辑器内容的最后
var body = editor.getBody();
editor.selection.setCursorLocation(body, body.childNodes.length);

内容的提问来源于stack exchange，提问作者Denys Wessels