CKEditorを自分色に染める(1)

CKEditor+KCFinderネタが好評らしいので、いくつかCKEditorネタを扱うことにした。
まずは、カスタムビルド。
いきなりヘビーなネタ(w
minifyされてるJSが同梱されてるけど、やっぱりビルドしたい輩もいる訳で。
ちなみにビルドすると、

1. デフォルトスキンに好きなものを指定できる
2. デフォルト言語に日本語を指定できる
3. 要らないプラグインを外せる
4. 1～3を実施することで、CKEditor表示完了までの時間を短縮できる

といったメリットがある。

カスタマイズするには、まずは本家からソースを取得する。
といっても、既にCKEditorをダウンロードしている場合は、minifyされたJSと同梱されているので取得不要。
次に、専用minifierを取得する。
JAR版は、こちら。EXE版は、こちら。

カスタマイズの流れとしては、

1. ckeditor.packを編集
2. 必要であれば、関連リソースを編集
3. Let's Build!

になる。

それでは、カスタムビルドに取り掛かる。

1. デフォルトスキンに好きなものを指定する

まずはckeditor.pack中で、

 '_source/skin/kama/skin.js'

を探して、「kama」→「office2003」など好きなものに書き換える。

次に、_source/core/config.js中で、

 skin : 'kama'

を探して、「kama」→ckeditor.packで指定したものに書き換える。

2. デフォルト言語に日本語を指定する

まずは、_source/core/config.js中で、

 defaultLanguage : 'en'

を探して、「en」→「ja」に書き換える。

もし、日本語でしか運用しないのなら、ckeditor.js自体に言語ファイルを組み込んでしまった方が都合がいい。
言語ファイルを組み込むにはckeditor.pack中で、

 '_source/lang/en.js'

を探して「en.js」→「ja.js」に書き換える。
デフォルトでは、この行はコメントアウトされているので適宜コメントを外す。

3. 要らないプラグインを外す

まずはckeditor.pack中で、

 '_source/plugins/print/plugin.js'

などのプラグインファイルを探して、コメントアウトする。

次に、_source/core/config.js中で、

 plugins : 

を探して、ckeditor.packでコメントアウトしたものを同様にコメントアウトする。
そして、

 removePlugins : ''

を探して、ckeditor.packでコメントアウトしたものを列記する。

こんな感じで編集する。
ちなみにサイト内で完結するコンテンツのエディタとして利用する場合は、

• basicstyles (Boldなどを利用したい場合は、外すと利用出来なくなる!)
• bidi
• flash
• format
• forms
• iframe
• newpage
• print
• scayt
• stylescombo
• specialchar

などが不要なプラグインと思われる。

さて、お楽しみのビルドタイム!
JAR版でのビルドは、

java -jar ckpackager.jar ckeditor.pack

と実行する。

基準となるオリジナルビルドは、

Packaging file ckeditor_basic.js


    Checking compressed code...

    Number of files processed: 5
    Original size............: 41471 bytes
    Output file size.........: 6940 bytes (17% of original)

Packaging file ckeditor.js


    Checking compressed code...

    Number of files processed: 117
    Original size............: 1189255 bytes
    Output file size.........: 356683 bytes (30% of original)

初期状態は、言語ファイルやスタイル定義など色々読み込んでいる。

そしてカスタムビルドは、

Packaging file ckeditor_basic.js


    Checking compressed code...

    Number of files processed: 5
    Original size............: 41471 bytes
    Output file size.........: 6940 bytes (17% of original)

Packaging file ckeditor.js


    Checking compressed code...

    Number of files processed: 107
    Original size............: 1130877 bytes
    Output file size.........: 340796 bytes (30% of original)

CKEditor自体が9KBくらい軽量化されていて、
言語ファイルなどの読み込みが減っているのが分かる
結果として、onloadまでの時間が短縮されている。

となった。
実は、言語ファイルを組み込むだけでは、オリジナルビルドより肥大化するけれど、
プラグイン外しが効いている結果だったりする。
用途次第では、もっとプラグインを外せたり、そもそもconfig.jsを読み込む必要すらなくなる。

TinyMCEに比べて軽いと聞いて使っているのに、初期ロードがいまいちと感じる方はお試しあれ。