PowerCMSでTinyMCEのドロップダウン「スタイル」にドロップダウン「段落」の機能を取り込む
TinyMCEのツールバー上のUIであるドロップダウン「段落」は、編集領域上のカーソルがいるテキストを、当該ドロップダウンで指定したブロックタグでマークアップできる。
例）ドロップダウンでの変換のイメージ
<p>.ほげ</p>
↓
<h1>ほげ</h1>
しかし、次のようにclass付きで変換する事ができない。
<p>.ほげ</p>
↓
<h1 class="fuga">ほげ</h1>
TinyMCEのドロップダウン「書式」の選択肢の設定は、「theme_advanced_blockformats」が司っている。
TinyMCEの初期化時にコード上で次のように指定されるが、公式ドキュメントや他のウェブ上のドキュメントで、ここでclassを設定するような例を見たことはない。
theme_advanced_blockformats : "p,h2,h3,pre"
これをドロップダウン「スタイル」で実現できないかと考えたが、次のような形で可能な模様。
tinymce_editor.init['style_formats'] = [
{ title: '段落', block: 'p' },
{ title: '見出しlv2', block: 'h2' },
{ title: '見出しlv3', block: 'h3', classes: 'hoge' },
{ title: '見出しレベル4', block: 'pre' }
];
例えば上記の設定をTinyMCEに適用した状態で、TinyMCEの編集領域上のpタグで囲ったテキストにカーソルを合わせて、ドロップダウン「スタイル」から見出しLV3を選ぶと、次のように変換できる。
<p>ふが</p>
↓
<h3 class="hoge">ふが</h3>