TinyMCE：您可以在自定義菜單按鈕中嵌入插件嗎？

Question

從這個codepen工作 http://codepen.io/tinymce/pen/NGegZK

代碼：

tinymce.init({ 
    selector: 'textarea', 
    height: 500, 
    theme: 'modern', 
    plugins: [ 
    'advlist autolink lists link image hr anchor media table', 
    'emoticons template paste textcolor colorpicker imagetools' 
    ], 
    toolbar1: 'bold italic formatting | fontsizeselect forecolor backcolor removeformat | format bullist numlist outdent indent | table link emoticons', 
    image_advtab: true, 
    menubar: false, 
    templates: [ 
    { title: 'Test template 1', content: 'Test 1' }, 
    { title: 'Test template 2', content: 'Test 2' } 
    ], 

    setup: function(editor) { 
    editor.addButton('formatting', { 
     type: 'menubutton', 
     text: '', 
     icon: true, 
     image: 'http://www.veryicon.com/icon/16/System/iOS7%20Minimal/Text%20Formatting%20Border%20color.png', 
     menu: [{ 
     text: 'Make me font size select!', 
     } 
     }, { 
     text: 'Forecolor etc', 
     }] 
    }); 
    }, 
    content_css: [ 
    '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css', 
    '//www.tinymce.com/css/codepen.min.css' 
    ] 
}); 

通知第三項是自定義格式菜單（看起來像蠟筆）

我想要做的就是嵌入fontsizeselect forecolor backcolor removeformat插件進入該菜單。

我是否需要重新構建所有插件？看起來他們應該可以在菜單中使用，不是嗎？謝謝。

Answer 1

格倫 -

正如你似乎已經推測，將這些默認行爲到工具欄的代碼在各種插件（在某些情況下，主TinyMCE的JS文件）完成。

例如...

• forecolor和backcolor經由textcolor插件添加。
• fontsizeselect和removeformatting被添加在主要tinymce.js文件中。

這（作爲一個例子）是textcolor插件的一部分：

editor.addButton('forecolor', { 
    type: 'colorbutton', 
    tooltip: 'Text color', 
    format: 'forecolor', 
    panel: { 
     role: 'application', 
     ariaRemember: true, 
     html: renderColorPicker, 
     onclick: onPanelClick 
    }, 
    onclick: onButtonClick 
}); 

作爲TinyMCE的是開源就肯定可以調整，其中控件被添加。如果你看看print插件，你會看到一個插件添加項目到菜單而不是工具欄的例子。

您可以修改插件和tinymce.js文件來完成您之後的操作，但請記住，將來需要在更新TinyMCE時管理這些更改。