MT5.2に搭載されたTinyMCEのカスタマイズ(「Extend TinyMCE」プラグインの紹介)

MT5.2より、新しいリッチテキストエディタとしてTinyMCEが(プラグインで)搭載されました。今までのプロジェクトでは必要に応じてToi企画様のCKEditorForMTを利用してきましたが、新しく搭載されたTinyMCEがHTML5に対応していることから、TinyMCEに移行することにしました。

ただ、標準状態ではTinyMCEの機能が絞り込まれています。今まで利用していたCKEditorForMTにありTinyMCEに不足している(非表示になっている)のが下記4機能でした。

  • テーブル機能
  • スタイル付け機能
  • テンプレート機能
  • フォントサイズ指定機能

その他、画像パスをルート相対パスに変換するオプション設定も施してあります。

  • フォントサイズ指定機能は不要と思いますが、お客さまによってはどうしても...、ということで追加準備を兼ねてリストに加えています。
  • テンプレート機能は、例えば下記のようなfloatを設定するレイアウトをお客さまでも実現可能にするために利用しています。
    テンプレート機能を利用したレイアウトの例

MT5.2ではプラグインによる拡張方法が用意されていることから、「Extend TinyMCE」プラグインを作成して機能の追加を実現しました。

Extend TinyMCEの詳細

テーブル機能が必要なことから、シックス・アパート様がGitHubでGPLとして公開されている「リッチテキストエディタ (TinyMCE) にテーブル機能を追加するプラグイン」をForkして開発させて頂きました。ソースコード一式は、GitHubのhideki-a / mt-plugin-extend-tinymceにて公開しています。

本プラグインを導入すると、下記のようなリッチテキストエディタになります。機能が少しCKEditorに近くなったのではないでしょうか。
Extend TinyMCEプラグイン導入後のリッチテキストエディタ画面

インストール

plugins/ExtendTinyMCEとmt-static/plugins/ExtendTinyMCEをお使いのMTにコピーするだけでOKです。

参考にしたリソース

カスタマイズの際は、下記リソースが参考になります。

特に、全機能が表示されるTinyMCE 3.5.6 jQuery packageのexamples/index.htmlファイルを眺めると分かりやすいかと思います。
TinyMCEサンプルファイルのエディタ画面

さらなるカスタマイズ例

「フォントの大きさ」のリスト変更

  1. mt-static/plugins/ExtendTinyMCE/extension.jsをエディタで開きます。
  2. 15行目のfont_sizes = '12px,16px',を任意のフォントサイズに変更します。

スタイルメニューでh3要素にclass属性値hdg-l3-2を付ける

  1. mt-static/plugins/ExtendTinyMCE/extension.jsをエディタで開きます。
  2. 11行目から始まるstylesを下記のように変更します。
     styles = [
     {title : '見出し3-2', block : 'h3', classes : 'hdg-l3-2'}
     ],

「Wordから貼り付け」ボタンの追加

  1. mt-static/plugins/ExtendTinyMCE/extension.jsをエディタで開きます。
  2. buttons2(2段目のボタン設定)にpastewordを追加します。
    var config = MT.Editor.TinyMCE.config,
     base_url = StaticURI + 'plugins/ExtendTinyMCE/',
     add_plugins = ',table,template',
     buttons1 = (config.plugin_mt_wysiwyg_buttons1 || '') + ',|,template',
     buttons2 = 'undo,redo,pasteword,|,forecolor,backcolor,removeformat,|,justifyleft,justifycenter,justifyright,indent,outdent,|,styleselect,formatselect,fontsizeselect,|,mt_fullscreen',
  3. アイコンを作成します。CSSスプライトで作られているmt-static/plugins/ExtendTinyMCE/skin/img/icons.pngの末尾に追加するのが理想ですが、単独ファイルにしてmt-static/plugins/ExtendTinyMCE/skin/img/に保存しても構いません。
  4. mt-static/plugins/ExtendTinyMCE/skin/ui.cssをエディタで開き、.mce_pastewordにスタイルを設定します。
    .mtSkin span.mce_template {
    // backgroundプロパティでアイコンの設定
    }

XHTML対応にする

  1. mt-static/plugins/ExtendTinyMCE/extension.jsをエディタで開きます。
  2. 19行目をelement_format = 'xhtml';に変更します。

追記(2012年9月12日)

section要素の追加などを可能にしたVer.1.0.4をリリースしています。section要素の追加については、「MT5.2のTinyMCEでsection要素を挿入可能にするカスタマイズ」をご覧下さい。

この記事のタグ