使用setNode()更新所选节点时，出现了TinyMCE 4节点重复问题

TinyMCE 4 node duplication issue when updating selected node using setNode()

本文关键字：节点 TinyMCE 问题 setNode 更新 使用      更新时间：2023-09-26

使用TinyMCE 4，我试图实现一个具有相当简单功能的按钮:对于选中的(突出显示的)节点，我想通过单击该按钮来更新其类。

我正在使用setNode()函数更新节点。问题是，我没有像预期的那样更新现有节点，而是得到了一个重复的节点。

例如，假设我在tinyMCE主体中有以下文本:

<p>This is a paragraph.</p>

高亮显示文本并点击"MyButton"后的预期结果:

<p class="updated">This is a paragraph.</p>

我得到的却是:

<p class="updated">
    <p class="updated">This is a paragraph.</p>
</p>

所以由于某种原因，节点被复制了(或者被同一个节点包装了?)，我不明白为什么。

相关代码:

<script type="text/javascript">
tinymce.init({
    //...
    setup: function(editor){
        editor.addButton('MyButton', {
            name: 'MyButton',
            text: 'MyButton',
            icon: false,
            onclick: function() {
                var selectedNode = window.parent.tinyMCE.activeEditor.selection.getNode(), //get the selected node
                    updatedNode  = $(selectedNode).addClass('updated'); //perform desired modifications to it
                    updatedNode  = updatedNode.get(0); //return the javascript element
                //update the node:
                window.parent.tinyMCE.activeEditor.selection.setNode(updatedNode);
            }//end onclick
        });//end addButton
    }//end setup
});//end tinymce.init
</script>

EDIT:我终于找到了一个解决方法。不是创建一个新节点(updatedContent)，然后用它来设置所选节点的内容(window.parent.tinyMCE.activeEditor.selection.setContent(updatedContent);)，而是直接更新所选节点(selectedNode)。像这样:

$(selectedNode).addClass('updated');

我终于明白是怎么回事了。

看一下这段代码:

var updatedNode = $(selectedNode).addClass('updated');

这一行实际上做了两件事:它向所选节点添加了一个类，但它也将这个结果存储在updatedNode中。

到目前为止，DOM应该是这样的: 
<p class="updated">This is some paragraph.</p>

那么这行运行:

window.parent.tinyMCE.activeEditor.selection.setNode(updatedNode);

，它实际上做到了它所承诺的:它设置所选节点的内容…

它取选中的节点，在这一点上看起来是这样的:

<p class="updated">This is some paragraph.</p>
换句话说，它将其内容替换为updatedNode，即<p class="updated">和</p>标签之间的内容，如下所示: 
<p class="updated">This is some paragraph.</p>

所以用<p class="updated">This is some paragraph.</p>代替This is some paragraph是非常正确的。因此，我们得到了意想不到的结果……

<p class="updated"><p class="updated">This is some paragraph.</p></p>

我现在明白了这个问题很微妙，而且确实是针对我的情况。然而，我还是决定把这个解释贴出来，希望有一天它能帮助到别人。
相关文章：