tinymce-4 - tinymce 4 のツールバーで見出し (h1、h2、h3) を直接取得する方法

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 フォーラムでこの質問を参照すると、次のようになります。

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

構成でこれらのパラメーターを使用します。

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'}
            ]}
        ]