TinyMCE style_select - クラスを追加する
TL; DRの質問
style_formatを使ってクラスのサブメニューを作成するにはどうすればいいですか？- 既存のメニューにサブメニューを追加できますか？
TinyMCE 4.0の新しいStyleselectには、たくさんの定義済みメニュー、ヘッダ、インライン、ブロック、配置があります。これらのメニューを保持しながら、開発者が定義したクラスのサブ項目を持つ新しいClassesメニューを追加する方法はありますか？
上の写真は、私が目指しているものです。私はこのフィルタリング機能を使ってクラスを追加することができます - 問題はすべての定義済みのメニュー項目（AlignmentからAlignment）を削除し、それらを私のクラスだけに置き換えます。
function myformatTinyMCE($in) {
$style_formats = array(
array(
'title' => 'Blue Color',
'selector' => 'p,strong,u,em,ul,ol,a',
'classes' => 'blueColor',
'wrapper' => false,
)
);
$in['style_formats'] = json_encode( $style_formats );
return $in;
}
add_filter('tiny_mce_before_init', 'myformatTinyMCE' );
私は TinyMCEのstyle_formatsドキュメンテーション を見てそれらが何をしているのかを再現しようとしましたが、スタイルが定義済みのようです。線形と同じようにキーワードに接続されているので、可能かどうかはわかりません。サブメニューを複製することはできましたが、クラスであり直接のstyle=""フォーマットではないため、サブメニューを適用することはできませんでした。
function myformatTinyMCE($in) {
$style_formats = array(
array(
'title' => 'Classes',
'items' => array(
array(
'title' => 'Blue Color',
'icon' => 'alignleft',
'format' => 'blueColor'
)
)
)
);
$in['style_formats'] = json_encode( $style_formats );
return $in;
}
add_filter('tiny_mce_before_init', 'myformatTinyMCE' );
編集
すばやく簡単な方法は、単純な設定ですstyle_formats_merge...
function myformatTinyMCE($in) {
$style_formats = array(
array(
'title' => 'Classes',
'items' => array(
array(
'title' => 'Blue Color',
'selector' => 'p,strong,u,em,ol,ul',
'classes' => 'blueColor'
)
)
)
);
$in['style_formats_merge'] = true;
$in['style_formats'] = json_encode( $style_formats );
return $in;
}
add_filter('tiny_mce_before_init', 'myformatTinyMCE' );
この点より下のすべてのものはそれについて取り組むためのはるかに長い方法ですが、私はそれを続けていくので将来の視聴者にとって役に立つかもしれません。
この質問をした直後、TinyMCEフォームで答えを見つけました。 TinyMCEへのクラスの追加style_formats - コードの最終行ではありません。 WordPress形式では、このようになります。
function myformatTinyMCE($in) {
$style_formats = array(
array(
'title' => 'Classes',
'items' => array(
array(
'title' => 'Blue Color',
'selector' => 'p,strong,u,em,ol,ul',
'classes' => 'blueColor'
)
)
)
);
$in['style_formats'] = json_encode( $style_formats );
return $in;
}
add_filter('tiny_mce_before_init', 'myformatTinyMCE' );
残念ながら、それはまだすべての古いTinyMCEメニュー項目をクリアします。それから style_format docs を使ってメニュー項目を作り直しました。長いバージョンは（クラスなしで）このように見えます。
function myformatTinyMCE($in) {
$style_formats = array(
array(
'title' => 'Headers',
'items' => array(
array(
'title' => 'Header 1',
'format' => 'h1'
),
array(
'title' => 'Header 2',
'format' => 'h2',
),
array(
'title' => 'Header 3',
'format' => 'h3'
),
array(
'title' => 'Header 4',
'format' => 'h4'
),
array(
'title' => 'Header 5',
'format' => 'h5'
),
array(
'title' => 'Header 6',
'format' => 'h6'
)
)
),
array(
'title' => 'Inline',
'items' => array(
array(
'title' => 'Bold',
'icon' => 'bold',
'format' => 'bold'
),
array(
'title' => 'Italic',
'icon' => 'italic',
'format' => 'italic'
),
array(
'title' => 'Underline',
'icon' => 'underline',
'format' => 'underline'
),
array(
'title' => 'Strikethrough',
'icon' => 'strikethrough',
'format' => 'strikethrough'
),
array(
'title' => 'Superscript',
'icon' => 'superscript',
'format' => 'superscript'
),
array(
'title' => 'Subscript',
'icon' => 'subscript',
'format' => 'subscript'
),
array(
'title' => 'Code',
'icon' => 'code',
'format' => 'code'
)
)
),
array(
'title' => 'Blocks',
'items' => array(
array(
'title' => 'Paragraph',
'format' => 'p'
),
array(
'title' => 'Blockquote',
'format' => 'blockquote'
),
array(
'title' => 'Div',
'format' => 'div'
),
array(
'title' => 'Pre',
'format' => 'pre'
)
)
),
array(
'title' => 'Alignment',
'items' => array(
array(
'title' => 'Left',
'icon' => 'alignleft',
'format' => 'alignleft'
),
array(
'title' => 'Center',
'icon' => 'aligncenter',
'format' => 'aligncenter'
),
array(
'title' => 'Right',
'icon' => 'alignright',
'format' => 'alignright'
),
array(
'title' => 'Justify',
'icon' => 'alignjustify',
'format' => 'alignjustify'
)
)
)
);
$in['style_formats'] = json_encode( $style_formats );
return $in;
}
add_filter('tiny_mce_before_init', 'myformatTinyMCE' );
最初の関数のclasses配列をこの既存の関数に追加するだけで、最後のメニュー項目として追加できます。これは、クラスのコンパクト版です。
function myformatTinyMCE($in) {
$style_formats = array(
array('title'=>'Headers','items'=>array(array('title'=>'Header 1','format'=>'h1'),array('title'=>'Header 2','format'=>'h2',),array('title'=>'Header 3','format'=>'h3'),array('title'=>'Header 4','format'=>'h4'),array('title'=>'Header 5','format'=>'h5'),array('title'=>'Header 6','format'=>'h6'))),array('title'=>'Inline','items'=>array(array('title'=>'Bold','icon'=>'bold','format'=>'bold'),array('title'=>'Italic','icon'=>'italic','format'=>'italic'),array('title'=>'Underline','icon'=>'underline','format'=>'underline'),array('title'=>'Strikethrough','icon'=>'strikethrough','format'=>'strikethrough'),array('title'=>'Superscript','icon'=>'superscript','format'=>'superscript'),array('title'=>'Subscript','icon'=>'subscript','format'=>'subscript'),array('title'=>'Code','icon'=>'code','format'=>'code'))),array('title'=>'Blocks','items'=>array(array('title'=>'Paragraph','format'=>'p'),array('title'=>'Blockquote','format'=>'blockquote'),array('title'=>'Div','format'=>'div'),array('title'=>'Pre','format'=>'pre'))),array('title'=>'Alignment','items'=>array(array('title'=>'Left','icon'=>'alignleft','format'=>'alignleft'),array('title'=>'Center','icon'=>'aligncenter','format'=>'aligncenter'),array('title'=>'Right','icon'=>'alignright','format'=>'alignright'),array('title'=>'Justify','icon'=>'alignjustify','format'=>'alignjustify')))
,array(
'title' => 'Classes',
'items' => array(
array(
'title' => 'Blue Color',
'selector' => 'p,strong,u,em,ol,ul',
'classes' => 'blueColor'
)
)
)
);
$in['style_formats'] = json_encode( $style_formats );
return $in;
}
add_filter('tiny_mce_before_init', 'myformatTinyMCE' );