Scrapdiary

DesigningとEngineeringの架け橋

CKEditorをCDNから利用する時のカスタマイズ方法

WebでWYSIWYGなエディタで使いやすいいCKEdiotorですが、サクッと導入したい時にファイル一式をホストするよりCDN経由で読み込む方が圧倒的に楽です。

CKEditorの特長の一つにカスタマイズのしやすさがあります。公式サイトでもツールを公開していますので、取捨選択・レイアウトも楽です。

Toolbar Configurator

利用サイトに自前でホストする場合はckeditor/config.jsを編集してカスタマイズするのですが、CDN経由の場合のエディタカスタマイズ方法が分からず、いろいろ解説サイトやドキュメントを(さっと)見たのですがすぐにわかりませんでした。

結果としてはCDN経由ではconfig.jsをCKEditorに明示的に指定してあげる必要があるようです。以下のサイトでCDN経由で利用する場合の注意点が書いてありました。

CKEditor CDN

CKEditor本体の読込み

CKEditor CDN setup

上記をhead内に記載し、エディタを適用したい要素にclass名で「ckeditor」と指定するか、別途scriptタグで置換します。注意点としては、このCKEditor.replace();はエディタを指定した要素より後に書く必要があります。

config.jsの指定

CKEditor customConfig setting

config.jsを指定するためのcustomConfigパラメータにファイルのパスを設定します。これもエディタを指定した要素より後に書かないと機能しません。

後は指定したconfig.jsを作成しカスタマイズを行うことでお好みのエディタの利用が可能になります。

カスタマイズ例

CKEditor customized example : 'config.js'

編集用の要素を絞ったのと、エディタ内でCSSやstyleを使えるようにする「config.allowedContent = true;」を追記しました。外部や不特定多数の利用が想定される場合にはこの設定をするとXSSなどのセキュリティリスクが高めてしまうので、利用には注意が必要です。タグの利用には個別の設定も可能なようなので、上記のようなケースでは「config.extraAllowedContent」で制御するべきとのことでした。

blog2.gods.holy.jp