CKEditor for Movable Typeは、Word感覚で文章を書いたり画像を挿入することができたりする大変優れたプラグインです。しかしながら、僕たちのようなWeb制作者には簡単にできるレイアウトを実現しようとすると急に難しくなります。例えば、
- 画像の左（右）にテキストを配置した後、任意の場所で回り込みを解除してテキストを配置する
- 見出しごとにセクション的なものでくくり、適度な間をあける（※）
といったレイアウトです。
- 間をあけるだけであれば:first-of-type疑似クラスを使ったスタイルを定義することで可能かもしれませんが、IE8ではサポートされていません。
このように、div要素で囲んだりする必要のあるレイアウトを簡単に実現する方法がないか探っていたところ、妥協は必要なもののCKEditorのテンプレート（雛形）機能を利用するとわりと簡単に実現できることが分かりました。
テンプレート（雛形）の準備
テンプレートはmt-static/plugins/CKEditor/template/config.jsに記述します。例として、画像とテキストを並列に並べるブロックを記述したものを示します。
CKEDITOR.addTemplates('movabletype',
{
imagesPath: StaticURI + '/plugins/CKEditor/template/images/',
templates :
[
{
title: '画像（左）とテキスト（回り込みなし）',
image: 'sample-01.png',
description: '画像を左に配置し、その右にテキストを配置するブロックです。',
html:
'<div class="lyt-image image-parallel image-L">' +
'<p class="image">画像を挿入します</p>' +
'<div class="text">' +
'<p>1段落目のテキストを挿入します。</p>' +
'<p>2段落目のテキストを挿入します。</p>' +
'</div>' +
'</div>' +
'<p>新しいブロックを挿入します。不要な場合はこの段落を削除します。</p>'
}
]
});それぞれの入力項目は、次のようになっています。
CKEDITOR.addTemplates('movabletype',
{
imagesPath: StaticURI + '/plugins/CKEditor/template/images/',
templates :
[
{
title: 'テンプレートのタイトル',
image: 'レンダリングイメージ画像',
description: 'テンプレートの説明',
html:
'HTMLを記述します。' +
'複数行にわたる場合は＋で連結します。'
'CKEditorの特性に対応するため、下記段落を加えておきます。' +
'<p>新しいブロックを挿入します。不要な場合はこの段落を削除します。</p>'
}
]
});テンプレートの挿入
デフォルトでは「ソース」ボタンの右にあるボタンをクリックします。すると次のようなモーダルウインドウが現れ、テンプレートの選択・挿入ができます。
テンプレートを2回挿入すると、次のようになります（ブロック表示にしています）。「画像を挿入します」の部分を画像に置き換え、任意のテキストを流し込めばレイアウトが完成します。
いくつかの課題と解決法
テンプレートが入れ子になってしまう
div要素を利用したテンプレートの場合、挿入したいコードだけをJSファイルに書いてテンプレートボタンから複数回テンプレートを挿入すると、div要素が次々と入れ子になってしまう問題が発生しました。これに対応するため、div要素の後ろにp要素を追加しておき、このp要素の部分でテンプレートを挿入し、テンプレートを入れ終わった後で削除するようにしました。CKEditorの改善を望みたいところです。
どのようなレイアウトになるのか分からない...
デフォルトの状態ではとてもWYSIWYGとは言えない状況に陥ります。解決策の1つとして考えられることは、エディタ部分（＝iframe）が読み込んでいるCSS（mt-static/plugins/CKEditor/ckeditor/contents.css）をカスタマイズし、画像の回り込みなどを再現できるようにすることです。ただし、画面が狭い環境や挿入する画像が大きい場合などは、編集が難しくなる可能性もあります。
- プラグインの設定画面からも編集することが可能です。また、任意のCSSファイルを読み込むことも可能です。
エディタ内容を置き換える問題への対応
デフォルトでは、テンプレートの選択画面下にある「現在のエディタの内容と置換えをします」にチェックが入っており、エディタの内容を丸ごと書き換えてしまうようになっています。これではWebに不慣れなお客さまにはやさしくないでしょう。そこで、下記2ファイルをカスタマイズし、デフォルトで常にテンプレートを追加していくように変更しました。
- mt-static/plugins/CKEditor/ckeditor/plugins/templates/dialogs/templates.js
- mt-static/plugins/CKEditor/ckeditor/ckeditor.js
GitHubのusualoma / ckeditor-for-mt（公式ダウンロードページ）をForkし、hideki-a / ckeditor-for-mtにカスタマイズしたコードを格納しておりますので、参考にしてみて下さい。ファイルのダウンロードも可能です。
- ライセンスが明記されていないのですが、CKEditor Open Source Licensesを利用して制作されたプラグインと認識しておりますので...。