Movable Type CMSプラットフォーム Movable Type
ドキュメントサイト

Blogブログ

リッチエディタの機能を拡張するプラグイン

この記事は Movable Type Advent Calendar 2013 の11日目の記事です。

Movable Type 5.2 から標準搭載されている TinyMCE(リッチエディタ)ですが、オリジナルの TinyMCE と比べると、機能を色々と絞り込んであります。これは、TinyMCE の提供する機能が豊富すぎるために、UIが複雑になって操作が難しくなるという事を、懸念したからです。

tinymce-1.png

では、TinyMCEの提供している機能をまったく使えないか?というと、そんな事はありません。TinyMCE のコードに手を入れずに、TinyMCE の設定値を変更して TinyMCE の機能を有効にしたり、TinyMCE で利用できるボタンを追加する。そんな事が Movable Type のプラグインで可能になっています。

Movable Type 開発チームも、これまでに2つのプラグインを提供しています。

TinyMCE でテーブル機能を利用する、Table Feature For TinyMCE

TinyMCE でテーブル機能を使えるようにするプラグインです。テーブル機能自体は、TinyMCE の table プラグインを利用していますが、ボタン等の UI デザインを Movable Type の TinyMCE と併せることで、統一感のある操作性を実現しています。

tinymce-2.png

入手先

https://github.com/movabletype/mt-plugin-table-feature-for-tinymce

ダウンロード ファイル

https://github.com/movabletype/mt-plugin-table-feature-for-tinymce/archive/master.zip

インストール方法

上記 ZIP ファイルを解凍してできるディレクトリを plugins と mt-static/plugins ディレクトリにコピーします。

  $MT_HOME/
      plugins/
          TableFeatureForTinyMCE/
      mt-static/
          plugins/
              TableFeatureForTinyMCE/
  

ライセンス・コピーライト

MIT ライセンス, Copyright 2012 Six Apart Ltd.

文末の <br> タグの自動除去を無効にする、TinyMCEPreserveBRElement

TinyMCE の初期設定では、文末の <br> タグが自動的に除去されるようになっています。無駄な HTML タグが出力されないという反面、<br clear="all" /> のような使い方をするときに困ってしまうこともあります。(<br> タグを利用しないという選択肢も、もちろんあります。)
このプラグインでは、TinyMCE の remove_trailing_brs という設定値の値を TinyMCE のコードを変更しないで、無効にすることができます。

入手先

https://github.com/movabletype/mt-plugin-TinyMCEPreserveBRElement

ダウンロード ファイル

https://github.com/movabletype/mt-plugin-TinyMCEPreserveBRElement/archive/master.zip

インストール方法

上記 ZIP ファイルを解凍してできるディレクトリを plugins にコピーします。

  $MT_HOME/
      plugins/
          TinyMCEPreserveBRElement/
  

ライセンス・コピーライト

MIT ライセンス, Copyright 2013 Six Apart Ltd.

このように、Movable Type で利用している TinyMCE を拡張することは、JavaScript の知識と、TinyMCE が提供するドキュメントを読んで試してみると、そんなに難しいことはありません。「Movable Type のTinyMCE を拡張する」も併せてお読みください。

また、「こんな機能が欲しい」「あんな事が簡単にできるといいな」というご要望につきましても、FogBugz や フィードバック フォームを始め、MTQ などでも受け付けておりますので、気軽にご利用ください。