Movable Type 5.2 のリッチテキストエディタを config.yaml で拡張する - movabletype/Documentation GitHub Wiki
Movable Type 5.2 で導入されたリッチテキストエディタの API には、エディタの機能を拡張するための方法が2通り用意されています。
1つは「Movable Type 5.2 のリッチテキストエディタを拡張する」で説明されている方法で、プラグインからMTMLを挿入して拡張することができます。こちらの方法は任意の JavaScript や CSS を追加することができるので、本格的にカスタマイズをすることができます。
もう1つは config.yaml (正確にはレジストリ) を使う方法です。リッチテキストエディタが最初から持っている設定項目であればこちらの方法で簡単に、JavaScript や CSS を編集することなしに、設定を変更することができます。
このドキュメントでは、後者の config.yaml を使って拡張する方法について説明をします。
config.yaml の書き方の説明に入る前に、前提となるリッチテキストエディタの設定項目について説明をします。
5.2 でデフォルトのリッチテキストエディタとして採用されている TinyMCE には、エディタの振る舞いを変更するするための設定項目が用意されており、これを利用すると「出力されるHTML」や「編集ボタンの挙動」などを変更することができます。
ここからは config.yaml の書き方の説明します。
例として、改行を入力した際に挿入される要素を p 要素から div 要素に変更するプラグインを作成してみます。TinyMCE 側の設定項目としては forced_root_block という項目があり、ここで div を指定すると変更することができます。
プラグインの名前を ForceDIVForTinyMCE
とすると、config.yaml の設置場所はplugins/ForceDIVForTinyMCE/config.yaml
になり、内容は以下の通りになります。
id: ForceDIVForTinyMCE name: ForceDIVForTinyMCE version: 1.00 editors: tinymce: config: forced_root_block: div
この中で今回の設定を行なっているのは最下部の4行になります。拡張する対象のエディタのeditorsで指定されたものと同じキー (ここではtinymce
) の下に、config
というキーで設定値を指定することができます。
プラグインを構成するファイルはこの config.yaml だけで、他には何も作成する必要はありません。以下、いくつかの設定例を見ていきます。
Enterキーを押下した際に p 要素ではなく br 要素が挿入されるようにする設定例です。
id: EnterBrForTinyMCE name: EnterBrForTinyMCE version: 1.00 editors: tinymce: config: force_br_newlines: true force_p_newlines: ~ forced_root_block: ''
HTML5 のルールで編集するように強制する設定例です。
id: HTML5ForTinyMCE name: HTML5ForTinyMCE version: 1.00 editors: tinymce: config: schema: html5 verify_html: true valid_children: ''
画像やアンカーの URL をホストからの相対パスに書き換える設定例です。
id: RelativeURLForTinyMCE name: RelativeURLForTinyMCE version: 1.00 editors: tinymce: config: relative_urls: ~ convert_urls: true remove_script_host: true
config.yaml では設定を簡潔に記載することができるのですが、いくつか注意の必要な点があります。
ある設定を無効にする場合に、ドキュメントの中のサンプルで false と書かれている場合がありますが、config.yaml に false と書いても無効とは解釈されないため false は ~ に置き換えて指定する必要があります。(厳密に完全に同じ意味になるわけではありませんが、TinyMCE の内部では同じ意味として解釈されます)
config.yaml で指定した値は追加ではなく、上書きになります。例えば、TinyMCE に含まれている wordcount というプラグインを有効にしようとして以下のように書いた場合には、MT 向けに用意されている他のプラグインが読み込まれなくなってしまいます。
id: WordcountForTinyMCE name: WordcountForTinyMCE version: 1.00 editors: tinymce: config: plugins: wordcount
正しくは、必要になるプラグインを全て含めて以下のように書く必要があります。
id: WordcountForTinyMCE name: WordcountForTinyMCE version: 1.00 editors: tinymce: config: plugins: lists,style,mt_inlinepopups,media,paste,mt_fullscreen,xhtmlxtras,mt,wordcount
ただ plugins
についてはこのような書き方をしたとしても、インストールされている他のプラグインでも同様に plugins
を上書きしている場合にお互いに上書きしあう形になってしまい、結果として一方の設定しか有効にならないという問題が発生します。そういった問題があるため、追記をするタイプのカスタマイズは config.yaml ではなく「Movable Type 5.2 のリッチテキストエディタを拡張する」で説明されている方法で行うことを推奨しています。
config.yaml による拡張は TinyMCE 以外のエディタに対しても利用することができ、この注意点は主に TinyMCE 以外のエディタを拡張する場合に問題になります。TinyMCE のマニュアルを参照しながらカスタマイズを行う場合には問題にならないので、必要の無い方はこの節は飛ばしても大丈夫です。
例えば CKEditor には enterMode という項目があり、この項目はドキュメントの中サンプルで CKEDITOR.ENTER_BR
といった値を指定するように書かれているのですが、ここで CKEDITOR.ENTER_BR
は JavaScript の式であるため config.yaml の中でそのまま指定することはできません。ここでは CKEDITOR.ENTER_BR
の値である 2 を指定する必要があります。
注意点の中でも少し触れましたが、新しい API では、TinyMCE以外のリッチテキストエディタに差し替える場合も、そのエディタの機能を config.yaml で拡張できることをサポートすることが推奨されています。 エディタを差し替える例として、公開されている CKEditor と CodeMirror はこの拡張方法をサポートしているので、TinyMCE と同様に以下のような形で指定することができます。
CKEditor のための、Enterキーを押下した際に p 要素ではなく br 要素が挿入されるようにする設定例です。
id: EnterBrForCKEditor name: EnterBrForCKEditor version: 1.00 editors: ckeditor: config: enterMode: 2
CodeMirror のための、編集領域で行を折り返す設定を無効にする設定例です。
id: NoLineWrappingForCodeMirror name: NoLineWrappingForCodeMirror version: 1.00 editors: codemirror config: lineWrapping: ~