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

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

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

環境

CKEditor

  • ver.4.5.10
  • fullパッケージ

HTMLで読み込み

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

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

textareaに適応

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

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

プラグインの追加

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

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

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

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

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

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

不要なプラグインの削除

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

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

参考