2016-09-14 4 views
0

tinyMCE 4.2를 사용하여 사용자가 에디터의 아무 곳이나 클릭 할 때마다 (사용자 정의) 툴바 버튼의 텍스트를 변경해야합니다.TinyMCE 4 에디터에서 툴바 버튼 텍스트 변경

이 관련 코드 :

tinymce.init({ 

    //code ommitted... 

    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image jbimages navigationbutton glossary", 

    setup: function(editor){ 

     //add "Glossary" button 
     editor.addButton('glossary', { 
      name: 'glossary', 
      text: 'Glossary', 
      onclick: function(){ 
       /* 
       //commented on purpose 
       var button = this; 
       var updatedButtonText = "Some updated button text"; 
       button.text = updatedButtonText; 
       */ 
      } 
     });//end addButton 

     editor.on('click', function(){ 
      var updatedButtonText = "Some updated button text"; 

      //update the button text: 
      editor.buttons.glossary.text = updatedButtonText; //doesn't work 
      window.parent.tinyMCE.activeEditor.buttons.glossary.text = updatedButtonText; //doesn't work either 

      //confirm changes: 
      console.log(editor.buttons.glossary.text); //correctly prints "Some updated button text" 
      console.log(window.parent.tinyMCE.activeEditor.buttons.glossary.text); //correctly prints "Some updated button text" as well 
     }); 

    }//end setup 
});//end tinymce.init 

그래서 문제는 정말 버튼 객체의 text 속성이 변화를 수행하는 동안,이 변화가 버튼 텍스트가 "용어집"을 유지 에디터에 반영되지 않고 있다는 점이다 . 흥미롭게도 단추의 onclick 함수를 통해 똑같은 작업을하면 (주석 된 코드 블록의 주석을 제거하면) 예상대로 완벽하게 작동합니다. 단추 텍스트는 편집기에서 업데이트됩니다.

TinyMCE 4의 문서에서 몇 가지 관련 정보를 찾으려고했지만 몇 시간 헛되이 보냈습니다. 어떤 아이디어?

답변

0

일단 편집기의 툴바가로드되면 TinyMCE는 버튼의 아이콘/텍스트 변경을 지원하지 않습니다. 버튼이 '켜짐'또는 '사용 안함'으로 전환 된 경우 (예 : 굵게 표시되거나 굵게 표시되지 않는 텍스트 위에 커서를 올리면 굵게 버튼이 수행하는 동작) 변경할 수 있지만 실제 텍스트/아이콘은 변경할 수 없습니다.

편집자가 완전히로드 된 후에 용어집 버튼을 정의하는 데 사용한 JavaScript 객체가 여전히 남아 있으므로 속성 값이나 console.log 값을 변경하는 것처럼 객체를 변경할 수 있지만 TinyMCE는 사용하지 않습니다. 도구 모음이로드 된 후 해당 단추 개체를보고 단추를 업데이트하십시오.

+0

와우, 나는 그것을 기대하지 않았습니다. 따라서 ** 버튼의 ** onclick 함수에서'text' 속성을 변경하면 실제로 버튼을 업데이트하지만 ** 편집기 **에서 'text' 속성이 변경되면 업데이트되지 않습니다 'onclick' 함수는? 왜냐하면 이런 경우, 왜 그런 식으로 디자인 될지 이해가되지 않습니다. – pazof

+0

버튼 자체의 onClick에 코드를 넣더라도 UI에서 버튼의 텍스트를 변경할 수 없습니다. 행사. (JavaScript 객체에서는 변경되지만 툴바에서는 시각적으로 변경되지는 않습니다.) JS Fiddle이 작동하는지 보여줄 수 있습니까? –