CKEditor for Movable Typeを使う時の準備とか

使いそうなプラグイン

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

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

• CKSourceのフォーラム
• CKEditor 3.x/Developers Guide
• ToI（CKEditor for Movable Type とは）

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

YouTubeとかGoogleマップとか「ソースを貼り付け」がしたい時に使えます。
あと、HTMLを書けるけどソースを表示するボタンを使ってないみたいな時とかも……ないか（汗

Inserthtmlプラグイン（Google Code）

お仕事で使う場合は、langの中にja.jsを作ってあげると良いかもしれません。

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

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

imgとかaとかのパスを書き換えるプラグイン

まあ、これはMT側で一括置換しちゃうと思いますが、データが書き換えられてた方が、後でラクな気がしますので、使った方が良いと個人的には考えています。

Rewrite - CKEditor Japan Wiki - SourceForge.JP

プラグインそのものは、最新のCKEditor for Movable Typeに同梱されているはずなので、上記のリンクで設定方法等をご覧いただくとよろしいかと。

毎回やりそうな設定

個人的なメモですが。。。

ボタンの画像を変更

個人的には、FCKEditorの頃のが好きなので、いつも変えてます。
場所は「CKEditor/ckeditor/skins/movabletype/icons.png」。 movabletype以外のスキンを使う予定がないので、他のは削除。

スタイルの設定

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

テンプレートの設定

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

ソースコードの整形

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

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

って感じです。

これで、

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

とか整形されてたのを

<p>ほげほげほげほげほげ</p>
<p>ほげほげほげほげほげ</p>

に出来るはず。
リンク先にも書いてありますが、configでも出来るので、元のソースをいじるのはやめといた方がいいかもですね。

この記事は、他になんか思いついたら、書き足していきたいと思います。