如何使用tinymce啓用/禁用對選擇更改的自定義按鈕

Question

我使用此代碼創建用於更改圖像類的自定義tinymce按鈕。它在設置模塊中。

ed.addButton('cust_setimgaspreview', { 
     title : 'Set image as a preview image', 
     image : 'ikony/previews.png', 
     onclick : function() { 
      if(ed.selection.getNode().tagName == 'IMG') 
      { 
       ed.selection.getNode().className = 'preview'; 
      } else { 
       alert('You need to select an image.'); 
      } 
     } 
    }); 

正如你所看到的，我用一個「醜陋的方式」來禁用元素以外的圖像類的變化。如何禁用/啓用按鈕的方式與tinymce使用默認按鈕相同（如編輯圖像或編輯鏈接）？我想我需要以某種方式捕捉選擇更改，然後根據選擇更改按鈕狀態，但我沒有ide如何做到這一點。

Answer 1

就想通了 - 這是相當簡單的。我剛剛編輯了我的設置功能並添加了「onNodeChange」處理程序。

setup : function(ed) { 

    ed.onNodeChange.add(function(ed, cm, node) { 
     cm.setDisabled('cust_setimgaspreview', !(node.tagName == 'IMG')) 
    }); 

    ed.addButton('cust_setimgaspreview', { 
     title : 'Set image as a preview image', 
     image : 'ikony/previews.png', 
     onclick : function() { 
      ed.selection.getNode().className = 'preview'; 
     } 
    }); 

} 

Answer 2

您可以使用控制管理器提供的功能。

您可以使用即

 state = !state; 
     ed.controlManager.setActive('my_button_id', state);