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 の書き方

ここからは 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 だけで、他には何も作成する必要はありません。以下、いくつかの設定例を見ていきます。

EnterBrForTinyMCE

Enterキーを押下した際に p 要素ではなく br 要素が挿入されるようにする設定例です。

id: EnterBrForTinyMCE
name: EnterBrForTinyMCE
version: 1.00

editors:
  tinymce:
    config:
      force_br_newlines: true
      force_p_newlines: ~
      forced_root_block: ''

HTML5ForTinyMCE

HTML5 のルールで編集するように強制する設定例です。

id: HTML5ForTinyMCE
name: HTML5ForTinyMCE
version: 1.00

editors:
  tinymce:
    config:
      schema: html5
      verify_html: true
      valid_children: ''

RelativeURLForTinyMCE

画像やアンカーの URL をホストからの相対パスに書き換える設定例です。

id: RelativeURLForTinyMCE
name: RelativeURLForTinyMCE
version: 1.00

editors:
  tinymce:
    config:
      relative_urls: ~
      convert_urls: true
      remove_script_host: true

config.yaml に記載する際の注意点

config.yaml では設定を簡潔に記載することができるのですが、いくつか注意の必要な点があります。

false を ~ に置き換える必要がある

ある設定を無効にする場合に、ドキュメントの中のサンプルで 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 のリッチテキストエディタを拡張する」で説明されている方法で行うことを推奨しています。

JavaScript の式は利用できない

config.yaml による拡張は TinyMCE 以外のエディタに対しても利用することができ、この注意点は主に TinyMCE 以外のエディタを拡張する場合に問題になります。TinyMCE のマニュアルを参照しながらカスタマイズを行う場合には問題にならないので、必要の無い方はこの節は飛ばしても大丈夫です。
例えば CKEditor には enterMode という項目があり、この項目はドキュメントの中サンプルで CKEDITOR.ENTER_BR といった値を指定するように書かれているのですが、ここで CKEDITOR.ENTER_BR は JavaScript の式であるため config.yaml の中でそのまま指定することはできません。ここでは CKEDITOR.ENTER_BR の値である 2 を指定する必要があります。

TinyMCE 以外のエディタを config.yaml で拡張する

注意点の中でも少し触れましたが、新しい API では、TinyMCE以外のリッチテキストエディタに差し替える場合も、そのエディタの機能を config.yaml で拡張できることをサポートすることが推奨されています。 エディタを差し替える例として、公開されている CKEditorCodeMirror はこの拡張方法をサポートしているので、TinyMCE と同様に以下のような形で指定することができます。

EnterBrForCKEditor

CKEditor のための、Enterキーを押下した際に p 要素ではなく br 要素が挿入されるようにする設定例です。

id: EnterBrForCKEditor
name: EnterBrForCKEditor
version: 1.00

editors:
  ckeditor:
    config:
      enterMode: 2

NoLineWrappingForCodeMirror

CodeMirror のための、編集領域で行を折り返す設定を無効にする設定例です。

id: NoLineWrappingForCodeMirror
name: NoLineWrappingForCodeMirror
version: 1.00

editors:
  codemirror
    config:
      lineWrapping: ~
⚠️ **GitHub.com Fallback** ⚠️