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

Question

使用 TinyMCE 4，我试图实现一个功能相当简单的按钮：对于选定（突出显示）的节点，我想通过单击该按钮更新其 class。

我正在使用 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>

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

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

Answer 1

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

看看这段代码：

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

这一行实际上做了两件事：它向选定的节点添加了一个 class，但它还将此结果存储在更新的节点中。

到目前为止，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">This is some paragraph.</p>

所以它非常正确地将 This is some paragraph 替换为 This is some paragraph.。因此我们得到了意想不到的结果...

This is some paragraph.

我现在发现这个问题非常微妙，并且确实针对我的情况。但是，我还是决定 post 进行解释，希望有一天它能对某人有所帮助。

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

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

javascript

jquery

tinymce

tinymce-4