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>

関連するタグ

PowerCMS, TinyMCE 3