Question

使用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>

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

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

Answer 1

我终于明白了发生了什么。

看看这段代码：

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">This is some paragraph.</p>

所以它正确地用This is some paragraph取代This is some paragraph.。因此我们得到了意想不到的结果......

This is some paragraph.

我现在看到问题非常微妙，而且我的案例非常具体。但是，无论如何，我决定发布这个解释，希望有一天能帮助别人。

使用setNode（）

1 个答案: