setNode（）を使用して選択したノードを更新するときのTinyMCE 4ノードの重複の問題

Question

TinyMCE 4を使用すると、かなり簡単な機能を備えたボタンを実装しようとしています。選択（強調表示）されたノードに対して、ボタン。

setNode()機能を使用してノードを更新しています。問題は、既存のノードを予想どおりに更新するのではなく、重複したノードを取得することです。例えば

、私はTinyMCEの本体にこのテキストを持っていると言う：

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

テキストをハイライト表示し、 "MyButtonという" クリックした後に期待される結果：私が代わりに取得しています何

<p class="updated">This is a paragraph.</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'); 

Answer 1

私はついに起こっていることを理解しました。

は、このコードのビットを見てみましょう：

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

この行は、実際には2つのことを行います。これは、選択したノードにクラスを追加しますが、それはまた、updatedNodeでこの結果を格納します。

だから今まで、DOMは次のようになります。

は

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

次に、この行が実行されます。それは、選択の内容を設定します。実際に、それは約束まさにん

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

をノード...

だから、この時点では、このようになりますこれは、選択したノードをとります。

とは、その内容を設定します。言い換えれば、それはそのコンテンツを置き換える - そう<p class="updated">と</p>タグの間にあるものは何でも - このようになりますupdatedNode、と：

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

だから、非常に正しくThis is some paragraphを<p class="updated">This is some paragraph.</p>に置き換えます。そして、我々は予期せぬ結果を得る...

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

---

私はこの問題は、実際には非常に微妙な、そして私の場合に特異的であることを今参照してください。しかし、私はいつか誰かを助けるかもしれないという希望で、とにかく説明を投稿することに決めました。