setNode()를 사용하여 선택된 노드를 업데이트 할 때 TinyMCE 4 노드 중복 문제가 발생했습니다.

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); 

을

: 노드는 ...

는 그래서이 시점에서 다음과 같습니다 선택된 노드를 취

및 382,는 내용을 설정 : 다른 말로하면, 그것의 내용을 대체 - 그래서 <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>

---

나는 문제가 정말 내 경우는 매우 미묘하고, 특정 이니까 참조하십시오. 그러나 언젠가 누군가를 도울 수 있기를 희망하면서 어쨌든 설명을 게시하기로 결정했습니다.