Skip to content

Movable Type 5.2 のリッチテキストエディタを拡張する

Jump to bottom
kaminogoya edited this page Jul 31, 2012 · 2 revisions

Movable Type 5.2 ではデフォルトのリッチテキストエディタとして TinyMCE が採用されています。また 5.2 ではリッチテキストエディタに関するAPIの仕様も新しくなっており、プラグインで拡張するための仕組みも導入されています。

本記事では、デフォルトのエディタである TinyMCE を拡張してテーブル関連のボタンを追加するプラグイン、TableFeatureForTinyMCE を例にして、基本的な拡張の手順をご紹介します。

新しいリッチテキストエディタの API

初めにリッチテキストエディタ本体の内容を簡単にご紹介し、続いてエディタを拡張するプラグインの書き方をご紹介します。

リッチテキストエディタの本体

デフォルトのエディタである TinyMCE は MT 本体の一部であると同時に独立したプラグインでもあるので、ファイルは plugins/TinyMCE と mt-static/plugins/TinyMCE の中に入っています。

プラグインの設定ファイルである plugins/TinyMCE/config.yaml の内容は以下の通りです。

id: TinyMCE
name: TinyMCE
version: 1
author_link: <nowiki>http://www.movabletype.org/</nowiki>
author_name: Six Apart, Ltd.
description: <MT_TRANS phrase="Default WYSIWYG editor.">

editors:
    tinymce:
        label: TinyMCE
        template: editor.tmpl

MT5.1 までの API では richtext_editors というキーでリッチテキストエディタを指定していましたが、新しい API では editors というキーに変更になっています。

上の例のように template: editor.tmpl と書いた場合には plugins/TinyMCE/tmpl/editor.tmpl が読み込まれます。本記事では editor.tmpl の内容には踏み込みませんが、このテンプレートの中で TinyMCE が読み込まれる形になっています。

リッチテキストエディタの拡張

リッチテキストエディタを拡張する際には、editors: tinymce: の下に extension: というキーを追加し、テンプレート名を指定します。

TableFeatureForTinyMCE では plugins/TableFeatureForTinyMCE/config.yaml で以下のように指定をしています。

id: TableFeatureForTinyMCE
name: TableFeatureForTinyMCE
version: 1.01
author_link: http://www.movabletype.org/
author_name: Six Apart, Ltd.
description: <MT_TRANS phrase="Add table feature for TinyMCE.">
l10n_lexicon:
    ja:
        Add table feature for TinyMCE.: "TinyMCEのテーブル機能拡張"

editors:
    tinymce:
        extension: extension.tmpl

このように書くと plugins/TableFeatureForTinyMCE/tmpl/extension.tmpl が読み込まれます。ここで extension.tmpl は必ず TinyMCE の editor.tmpl よりも後に読み込まれるため extension.tmpl の中では editor.tmpl が読み込み済みであるかどうかを心配する必要はありません。

extension.tmpl の内容は以下の通りです。

<mt:setvarblock name="js_include" append="1">
<script type="text/javascript" src="<mt:var name="static_uri">plugins/TableFeatureForTinyMCE/extension.js"></script>
</mt:setvarblock>
<mt:setvarblock name="html_head" append="1">
<link rel="stylesheet" href="<mt:var name="static_uri">plugins/TableFeatureForTinyMCE/skin/ui.css" type="text/css" />
</mt:setvarblock>

extension に指定したテンプレートでは、多くの場合 JavaScript や CSS を挿入するという内容になると思います。TableFeatureForTinyMCE では上記の通り mt-static/plugins/TableFeatureForTinyMCE 以下にインストールされたファイルを読み込んでいるのですが、簡易的なプラグインであればこのテンプレートに直接 JavaScirpt や CSS を記述することも可能です。

TinyMCE の拡張

ここからがいよいよ TinyMCE の拡張についてです。

TableFeatureForTinyMCE で行われている拡張

plugins/TinyMCE/tmpl/editor.tmpl が読み込まれた段階では、まだ TinyMCE はテキストエリアに適用されていないので、後から読み込まれる plugins/TableFeatureForTinyMCE/tmpl/extension.tmpl で適用時のオプションの変更などが可能です。

TableFeatureForTinyMCE で変更しているオプションは以下の4点です。

  • table プラグインを追加する (table プラグインは TinyMCE の本体に同梱されているものです)
  • 編集領域に適用する CSS を追加する (table 要素のガイドを表示するための CSS です)
  • table 関連のボタンを追加する
  • table 関連のダイアログのサイズを指定する

MT 上の TinyMCE ではオプションを MT.Editor.TinyMCE.config に保持しているので、TableFeatureForTinyMCE では mt-static/plugins/TableFeatureForTinyMCE/extension.js というファイルで、以下のように拡張をしています。

(function($) {

var config   = MT.Editor.TinyMCE.config;
var base_url = StaticURI + 'plugins/TableFeatureForTinyMCE/';
var buttons  =
    (config.plugin_mt_wysiwyg_buttons3 || '') + ',tablecontrols,|,visualaid';

$.extend(config, {
    plugins: config.plugins + ',table',
    content_css: config.content_css + ',' + base_url + 'skin/content.css',
    plugin_mt_wysiwyg_buttons3: buttons
});

$.extend(config.plugin_mt_inlinepopups_window_sizes, {
    'table/table.htm': {
        width: 600,
        height: 300
    },
    'table/row.htm': {
        width: 450,
        height: 300
    },
    'table/cell.htm': {
        width: 450,
        height: 300
    },
    'table/merge_cells.htm': {
        width: 250,
        height: 140
    }
});

プラグイン、CSS、ボタンの追加は8〜12行目で、既存の設定内容に追加しています。

$.extend(config, {
    plugins: config.plugins + ',table',
    content_css: config.content_css + ',' + base_url + 'skin/content.css',
    plugin_mt_wysiwyg_buttons3: buttons
});

ダイアログのサイズの指定は14〜31行目になります。これは TinyMCE の本体が持っている機能ではなく mt_inlinepopups という独自に追加したプラグインに対しての指定になります。本記事では mt_inlinepopups の詳しい紹介はしませんが、このような形で様々な設定を追加することが可能です。

TinyMCE で設定可能なその他の項目の変更

TableFeatureForTinyMCE ではダイアログのサイズの指定があるので少し長くなっていますが、TinyMCE の設定を変更するだけであればもっと短く書くことができます。

TinyMCE の設定マニュアルには沢山の設定項目があり、設定例は以下のように書かれています。

tinyMCE.init({
    accessibility_warnings : true
});

MT上の TinyMCE では、これらは以下のように書き換えることで適用できます。

(function($) {

var config = MT.Editor.TinyMCE.config;
$.extend(config, {
    accessibility_warnings : true
});

})(jQuery);

TinyMCE の UI のカスタマイズ

TableFeatureForTinyMCE ではテーブル関連のボタンの画像を指定するために extension.tmpl で mt-static/plugins/TableFeatureForTinyMCE/skin/ui.css というファイルを読み込んでいます。ui.css の内容は以下の通りです。

.mtSkin span.mce_table,
.mtSkin span.mce_row_props,
.mtSkin span.mce_cell_props,
.mtSkin span.mce_row_before,
.mtSkin span.mce_row_after,
.mtSkin span.mce_delete_row,
.mtSkin span.mce_col_before,
.mtSkin span.mce_col_after,
.mtSkin span.mce_delete_col,
.mtSkin span.mce_split_cells,
.mtSkin span.mce_merge_cells,
.mtSkin span.mce_visualaid {
    background: transparent url(./img/icons.png) no-repeat top left;
}

.mtSkin span.mce_table { background-position: 0 0; }
.mtSkin span.mce_row_props { background-position: -50px 0; }
.mtSkin span.mce_cell_props { background-position: -100px 0; }
.mtSkin span.mce_row_before { background-position: -150px 0; }
.mtSkin span.mce_row_after { background-position: -200px 0; }
.mtSkin span.mce_delete_row { background-position: -250px 0; }
.mtSkin span.mce_col_before { background-position: -300px 0; }
.mtSkin span.mce_col_after { background-position: -350px 0; }
.mtSkin span.mce_delete_col { background-position: -400px 0; }
.mtSkin span.mce_split_cells { background-position: -450px 0; }
.mtSkin span.mce_merge_cells { background-position: -500px 0; }
.mtSkin span.mce_visualaid { background-position: -550px 0; }

MT 上の TinyMCE では mt というカスタマイズしたスキンを適用しているので、エディタの親要素に mtSkin というクラスが付いています。スキンの CSS ファイルは mt-static/plugins/TinyMCE/tiny_mce/themes/advanced/skins/mt/ui.css にあるので、カスタマイズする際にはこのファイルを参照すると CSS の指定方法のヒントが得られます。

このドキュメントで作成したサンプルプラグインは以下のリンクよりダウンロードできます。

Clone this wiki locally