CKEditorForMTを使う時の準備とか

Mar 19, 2011 - nagomu

※ この記事は、May 13, 2010に投稿されたものを再掲したものです。情報が古かったりするかもしれません。

Movable Typeを使うお仕事の場合、自分がユーザーだったら「大量のカスタムフィールドに入力するの面倒だから、出来るだけWYSIWYGだけで済ませたくね？」と思うので、CKEditorのテンプレート機能を駆使する方向で提案しています。しかしながら、そのまま使うと、書き出されるソースに「インデント」「開始タグの後に改行」が入ってしまって、「まあ、MTタグで正規表現などを使って置換しても良いのだけれど......なんだかなぁ」とか思ってました。

で、今まで放置してた訳ですが、さすがにそろそろ調べてみようという事で、自分用のメモを晒しておきます。

使いそうなプラグイン

CKEditorには便利なボタンがたくさん用意されているので、基本的にはカスタム設定で減らしていく事の方が多いと思いますが、とりあえず「こんなの無いかなぁ」って時に探す場所とか、過去に使ったプラグインをメモ。

CKEditor関連の情報を探す時に見る

HTMLソースを挿入するプラグイン

YouTubeとかGoogleマップとか「ソースを貼り付け」がしたい時に使えます。

Inserthtmlプラグイン（Google Code）

お仕事で使う場合は、langの中にja.jsを作って、ラベルなんかをローカライズしてあげると良いかもしれません。

lang/en.jsをコピーしてja.jsに
plugin.jsの13行目くらいにあるlangをjaにする
作ったja.jsの1行目のenをjaにする
ja.jsを日本語にする（titleがダイアログのタイトル / HelpInfoがテキストエリアの上の説明）

インストールの方法はreadmeに書いてあります。
まあ、pluginsに入れて、ボタンを設定のトコにinserthtmlを追加するだけです。

毎回やりそうな設定

ボタンの画像を変更

場所は「CKEditor/ckeditor/skins/movabletype/icons.png」。 movabletype以外のスキンを使う予定がないので、他のは削除。

スタイルの設定

場所は「CKEditor/style/config.js」
ほとんど、テンプレートで挿入するようにしているので、ここで使うのは、太い赤字とか小さいグレーの字とかデフォルトで入ってるqやciteくらいですかねぇ。

テンプレートの設定

場所は「CKEditor/template/config.js」よくあるパターンとしては、キャプション付きの画像を左右にfloatとか、定型の連絡先とか......lightbox的な事などにもイイ気がします。

ソースコードの整形に関する設定

今回、探してたのはココなんですが、「Developers Guide」にありました。
詳細はリンク先をご覧いただければわかると思いますが、使いそうなのは......

「CKEditor/ckeditor/ckeditor.js」を開く
indentationCharsを検索して'\t'を「''」に修正（タブインデントしない）
breakAfterOpenを検索して~~trueを「false」~~1を0に（開始タグの後で改行しない）

って感じです。


<p>
\tほげほげほげほげほげ</p>
<p>
\tほげほげほげほげほげ</p>



とか整形されてたのを
<p>ほげほげほげほげほげ</p>
<p>ほげほげほげほげほげ</p>

に出来るはず。

ただ、configでも出来るので、元のソースをいじるのはやめといた方がいいかもですね。
configは、「/mt-staticが入ってるディレクトリ/mt-static/plugins/CKEditor/config.js」に書きます。あらかじめ、サンプルが入ってるので、それを参考に


CKEDITOR.editorConfig = function(config) {
    config.indentationChars = '';
    config.breakAfterOpen : false,
};

~~こんな感じでいけるはず（未検証）。~~ ダメっぽかったです。

追記：テンプレートを使う時、デフォルトで「内容を置き換えない」にするには、templates_replaceContentをfalseに。

nagomu.me