TinyMCE添加切換樣式

Question

我正在研究一個TinyMCE插件，我希望它做的一件事是註冊命令/按鈕來切換自定義格式。

例如，如果您單擊TinyMCE中的粗體按鈕，它將顯示以粗體文本突出顯示的粗體按鈕。挖掘到源代碼我看到這是通過：tinymce.EditorCommands.addCommands想到我似乎無法弄清楚如何複製它。 TinyMCE的的文件是太可怕以及=（

因此，考慮customFormat我希望能有我的插件，一鍵設置，當應用在customFormat它顯示爲諸如此類的粗體，斜體，和其他類似按鈕做在工具欄上，並單擊我的customFormat切換該開/關格式。我可以很容易地通過「addCommand」和「Add按鈕」完成的toogle但後來它沒有國家像大膽跟蹤和別人做。

顯示我目前的非工作嘗試（此代碼位於我的插件創建方法的init中）：

tinymce.EditorCommands.call('addCommands', { 
    'MyFormat' : function(name) { 
     ed.formatter.toggle("customFormat"); 
    } 
},'exec'); 

tinymce.EditorCommands.call('addCommands', { 
    'MyFormat' : function(name) { 
     return ed.formatter.match('customFormat'); 
    } 
},'state'); 

ed.addButton('customformat', {cmd : 'MyFormat'}); 

這裏是鏈接到addCommands的「文件」： http://www.tinymce.com/wiki.php/API3:method.tinymce.EditorCommands.addCommands

後多了很多環顧四周，我發現這似乎是完美的： http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.addQueryStateHandler

但是，當我實現它沒有按」代碼噸改變按鈕的狀態：

ed.addCommand('MyFormat', function(ui, v) { 
    ed.formatter.toggle("thoughtFormat"); 
    }); 

    ed.addQueryStateHandler('MyFormat', function() { 
     return ed.formatter.match('thoughtFormat'); 
    }); 

    ed.addButton('myformat', {cmd : 'MyFormat'}); 

Answer 1

萬一有人不想要做的「插件」的方式，下面是TinyMCE 4.x指導。

首先，你需要定義一個自定義格式：

formats: { 
    custom_format: {inline: 'span', style:{color: "red"}, attributes: {class: 'some_css_class'}} 
} 

然後你就會有一個按鈕添加到工具欄：

toolbar: "mybutton", 

接下來，你需要設置你的按鈕，使其切換格式：

setup: function(editor) { 
     editor.addButton('mybutton', { 
      text: 'My button', 
      icon: false, 
      onclick: function() { 
       tinymce.activeEditor.formatter.toggle('custom_format') 
      } 
     }); 
} 

此外，如果您希望編輯器設置按鈕的狀態指示當前節點的格式，自動將它添加到setup功能：

onPostRender: function() { 
    ctrl = this,     
    editor.on('NodeChange', function(e) { 
     ctrl.active(e.element.className == "some_css_class") 
    }); 
} 

你tinymce.init功能應該是這樣的：

tinymce.init({ 
    selector: "textarea", 
    formats: { 
     // Other formats... 
     custom_format: {inline: 'span', style:{color: "red"}, attributes: {class: 'some_css_class'}} 
    } 
    // Other default toolbars 
    toolbar_n: "mybutton", 

    // Finally, setup your button 
    setup: function(editor) { 
     editor.addButton('mybutton', { 
      text: 'My Button', 
      icon: false, 
      onclick: function() { 
       tinymce.activeEditor.formatter.toggle('custom_format') 
      }, 
      onPostRender: function() { 
       ctrl = this,     
       editor.on('NodeChange', function(e) { 
        ctrl.active(e.element.className == "dynamic-field") 
       }); 
      } 
     }); 
    } 

注意class屬性我加入到我的自定義格式。這種方法使我可以在單獨的樣式表文件中定義自定義樣式，並儘可能保持標記儘可能乾燥（無內聯樣式！）。點content_css選項，你的樣式表，你會很好去。 然而，由於事實上我使用Rails作爲後端和BatmanJS爲前端（我是相當新的後者），我無法弄清楚如何資產路由的作品，並最終加入我的自定義樣式轉換爲tinyMCE皮膚本身的默認內容樣式表文件（位於skins/SKIN_NAME/content.min.css）。

Answer 2

下面是一個例子：

ed.controlManager.get('my_control_element').setActive(true); // could be bold or whatever 

Answer 3

感謝Thariama的洞察力，讓我深入挖掘最終搞清楚如何做到這一點。我不確定它的「正確方式」，但正如我所說的，TinyMCE具有可以想象的最差的文檔。

我的關鍵是使用setActive技巧使onNodeChange事件掛鉤。完整的例子插件使用時的格式存在的任何地方光標是激活的自定義按鈕：

(function() { 
    tinymce.create('tinymce.plugins.CoolPlugin', { 
    init : function(ed, url) { 

     ed.addCommand('MyFormat', function(ui, v) { 
     ed.formatter.toggle("myFormat"); 
     }); 

     ed.addButton("coolformat", { 
     title : 'MyFormat Tooltip', 
     cmd : 'MyFormat', 
     image: url + '/coolformat.png', 
     }); 

     ed.onNodeChange.add(function(ed, cm, n) { 
     active = ed.formatter.match('myFormat'); 
     control = ed.controlManager.get('coolformat').setActive(active); 
     }); 

     ed.onInit.add(function(ed, e) { 
     ed.formatter.register('myFormat', 
      {inline: 'span', classes : ['cool'] }); 
     }); 
    } 
    }); 

    // Register plugin 
    tinymce.PluginManager.add('cool', tinymce.plugins.CoolPlugin); 
})();