如何採取標題（H1，H2，H3）直接在工具欄上TinyMCE的4

Question

我想改變航向（H1，H2，H3）直接工具欄上（如TinyMCE的第3版），因爲我用它非常多，當我創建新的藝術。我試圖在互聯網上搜索，但我沒有找到任何答案。請幫幫我。非常感謝

Answer 1

這個答案肯定會遲到，但也許它可以幫助像我這樣的人，人們如何尋找同一個問題的答案。我在這裏閱讀：http://blog.ionelmc.ro/2013/10/17/tinymce-formatting-toolbar-buttons/

首先，你必須創建插件：

tinyMCE.PluginManager.add('stylebuttons', function(editor, url) { 
    ['pre', 'p', 'code', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].forEach(function(name){ 
    editor.addButton("style-" + name, { 
     tooltip: "Toggle " + name, 
     text: name.toUpperCase(), 
     onClick: function() { editor.execCommand('mceToggleFormat', false, name); }, 
     onPostRender: function() { 
      var self = this, setup = function() { 
       editor.formatter.formatChanged(name, function(state) { 
        self.active(state); 
       }); 
      }; 
      editor.formatter ? setup() : editor.on('init', setup); 
     } 
    }) 
    }); 
}); 

然後你的工具欄中使用它：

tinyMCE.init({ 
    selector: '#id', 
    toolbar: "undo redo | style-p style-h1 style-h2 style-h3 style-pre style-code", 
    plugins: "stylebuttons", 
}); 

Answer 2

 tinymce.init({ 
      toolbar: 'undo redo | alignleft aligncenter alignright alignjustify | formatselect fontselect fontsizeselect | bullist numlist | outdent indent', 
     }); 

這是一個快捷的方法在您的TinyMCE 4的工具欄中添加H1，段落和其他選項。

如需完整列表，請參閱： http://www.tinymce.com/wiki.php/Controls 具體的'核心'部分。這顯示了最常用的工具。

Answer 3

指的對TinyMCE的論壇這樣一個問題：

http://www.tinymce.com/forum/viewtopic.php?id=32801

在配置使用這些PARAMS。

style_formats: [ 
      {title: 'Headers', items: [ 
       {title: 'h1', block: 'h1'}, 
       {title: 'h2', block: 'h2'}, 
       {title: 'h3', block: 'h3'}, 
       {title: 'h4', block: 'h4'}, 
       {title: 'h5', block: 'h5'}, 
       {title: 'h6', block: 'h6'} 
      ]}, 

      {title: 'Inline', items: [ 
       {title: 'Bold', inline: 'b', icon: 'bold'}, 
       {title: 'Italic', inline: 'i', icon: 'italic'}, 
       {title: 'Underline', inline: 'span', styles : {textDecoration : 'underline'}, icon: 'underline'}, 
       {title: 'Strikethrough', inline: 'span', styles : {textDecoration : 'line-through'}, icon: 'strikethrough'}, 
       {title: 'Superscript', inline: 'sup', icon: 'superscript'}, 
       {title: 'Subscript', inline: 'sub', icon: 'subscript'}, 
       {title: 'Code', inline: 'code', icon: 'code'}, 
      ]}, 

      {title: 'Blocks', items: [ 
       {title: 'Paragraph', block: 'p'}, 
       {title: 'Blockquote', block: 'blockquote'}, 
       {title: 'Div', block: 'div'}, 
       {title: 'Pre', block: 'pre'} 
      ]}, 

      {title: 'Alignment', items: [ 
       {title: 'Left', block: 'div', styles : {textAlign : 'left'}, icon: 'alignleft'}, 
       {title: 'Center', block: 'div', styles : {textAlign : 'center'}, icon: 'aligncenter'}, 
       {title: 'Right', block: 'div', styles : {textAlign : 'right'}, icon: 'alignright'}, 
       {title: 'Justify', block: 'div', styles : {textAlign : 'justify'}, icon: 'alignjustify'} 
      ]} 
     ] 

Answer 4

使用下面的工作對我來說

tinymce.init({ 
    toolbar: 'formatselect', 
    block_formats: 'Paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4;', 
});