CDNで読み込んだCKEditorのオプションを変更する

CKEditorはHTML上で動作するWYSIWYGエディタです。
機能がとても多く（もちろんシンプルなバージョンもあり）、
個人的に好きなエディタのひとつです 😀

今回はCDNから読み込んだ、
CKEditorのオプションを変更する方法の紹介です。

環境

CKEditor

ver.4.5.10
fullパッケージ

HTMLで読み込み

目的に応じたCKEditorのjsファイルをCDNから読み込みましょう。
CKEditor CDN

<script src="//cdn.ckeditor.com/4.5.10/full/ckeditor.js"></script>

上のscriptタグでは、CKEditor version 4.5.10のfullパッケージを読み込みます。

textareaに適応

textareaタグでCKEditorを使ってみましょう。

<textarea name="ckeditor"></textarea>
<script type="text/javascript">
    CKEDITOR.replace( 'ckeditor' );
</script>

たったこれだけでCKEditorが使えます。すごい XD
textareaのname属性に合わせて、CKEDITOR.replaceの引数を変えてください。

プラグインの追加

CKEditorには有志の方々が開発している拡張機能が数多くあります。
CDNからCKEditorを読み込んだ場合でも、プラグインを利用できます。

http://ckeditor.com/addons/plugins/all
上記URLから導入したいプラグインをダウンロードします。

ダウンロードしたファイルを解凍して、サーバにアップロードします。
ブラウザからアクセスできるところなら、
どこにアップロードしても大丈夫です。
（僕は/js/ckeditor/pluginsフォルダにまとめるようにしています）

あとは、CKEditorを適用しているscriptタグ内で、
下記のようにプラグイン名とフォルダの場所を指定してあげれば、
インストールは完了です。

<textarea name="ckeditor"></textarea>
<script type="text/javascript">
CKEDITOR.plugins.addExternal( 'プラグイン名', '/js/ckeditor/plugins/プラグイン名/', 'plugin.js' );
// e.g. CKEDITOR.plugins.addExternal( 'flash', '/js/ckeditor/plugins/flash/', 'plugin.js' );
CKEDITOR.replace('ckeditor', {
    // ...
    extraPlugins: 'プラグイン名',
    // e.g. extraPlugins: 'flash',
    // ...
});
</script>

プラグインによっては、extraPluginsでプラグイン名を指定して、
プラグインを有効化させる必要があります。

上のソースでは、例としてコメントアウト部分に、
flashプラグインを有効化させるコードを書いています。

不要なプラグインの削除

これだけでも十分なのですが、fullパッケージの中には不要なプラグインもあるでしょう。
例えば、ブログのエディタとして使おうと思っているので、余計な機能をつけたくない。
フォームボタンを消したい X<
そんな時は下記のように、ツールバーをカスタマイズできます。

<textarea name="ckeditor"></textarea>
<script type="text/javascript">
CKEDITOR.replace('ckeditor', {
    // ...
    removePlugins: 'forms',
    // ...
});
</script>

removePluginsに削除したいプラグインを指定すると、
ツールバーから削除することができます。
（今回の例ではフォーム）

参考

CKEditor CDN