カテゴリー
ckeditor

ckeditorのダイアログの項目を変えちゃおう(ckeditorカスタマイズ)

こんばんわ!rmascoです。

ckeditorカスタマイズ方法シリーズ第2弾です。

過去記事はこちらからどうぞ!

ckeditorカスタマイズ方法(その1)
ckeditorをカスタマイズするのに必要な情報や簡単な例を書いた記事です

ckeditorカスタマイズ方法その2の内容

ckeditorカスタマイズ方法のその2としてお伝えするのは、
ダイアログの表示の変更です。

ckeditorでは、画像の挿入やリンクの挿入など、
入力が発生するような機能はボタンを押下すると、
ダイアログが表示されます。

しかし、実際使用しない機能があったり、
このボタン押したときにこのイベント呼びたいんだよねってことが多々あります。

今日はこのダイアログのカスタマイズについて書いていこうと思います。

ダイアログのカスタマイズをやってみよう

ダイアログのカスタマイズについては、公式サイトにも情報がありました。
Developers_Guide/Dialog_Customization

またしても英語です。。。
大丈夫です!私も英語はわかりませんが、なんとなくざっくり適当に解説していきます


// 最初にダイアログの定義時のイベントにフックする関数を定義する
CKEDITOR.on( 'dialogDefinition', function( ev ){
// 表示されたダイアログの名前を取得
var dialogName = ev.data.name;
// 表示されたダイアログの定義を取得
var dialogDefinition = ev.data.definition;

// リンクのダイアログの場合
if ( dialogName == 'link' ){
// ダイアログコンテンツから、advanced(高度な設定)を削除する
dialogDefinition.removeContents( 'advanced' );

// ダイアログコンテンツから、target(ターゲット)を削除する
dialogDefinition.removeContents( 'target' );
}
});
これだけ?そう!これだけです(定番)
 
順番に説明します。
 
 
まずイベント「dialogDefinition」をフックします。
 
CKEDITOR.on( 'dialogDefinition', function( ev )
このイベントはダイアログが表示される機能すべてで呼び出されます。
画像挿入、リンク挿入、テーブル挿入、絵文字挿入、etc・・・
このイベント内で、どの機能のダイアログかを絞り込むのが、下記コードになります。
 
// 表示されたダイアログの名前を取得
var dialogName = ev.data.name;

// リンクのダイアログの場合
if ( dialogName == 'link' ){
(〜中略〜)
}
dialogNameにリンク挿入ならlink、画像挿入ならimage、絵文字ならsmilyといった具合で取得ができます。
次にその名前を使って絞り込みます。
 
絞り込みが終わったら、次はそのダイアログで表示される中身を変更してみます。
まず下記でダイアログの定義オブジェクト(?)を取得します。
 
 
// 表示されたダイアログの定義を取得
var dialogDefinition = ev.data.definition;
 
 
取得した定義オブジェクトには、このダイアログはこんなタブ(コンテンツ)があり、その中にはこんなボタンがある、テキストがある、というような情報にアクセスすることができます。
アクセスして、タブ(コンテンツ)を削除しているのが下記です。
 
 
// ダイアログコンテンツから、advanced(高度な設定)を削除する
dialogDefinition.removeContents( 'advanced' );
// ダイアログコンテンツから、target(ターゲット)を削除する
dialogDefinition.removeContents( 'target' );
 
実際にこのコードを実行すると、こうなります。
カスタマイズ前
ターゲットと高度な設定のタブ(コンテンツ)があります
 
カスタマイズ後
ターゲットと高度な設定のタブ(コンテンツ)が削除されました
 
おそらくこんな大胆なカスタマイズを行うことはないかと思いますが、
ckeditorはすごく簡単にHTMLを意識することなくかけてしまいますが、
本当にパソコンの初心者でエクセルやワードにも
あまり触れたことがないという人にとっては、
機能としては多いかと思います。
 
今回のようなカスタマイズをすることによって、機能を制限し、
実際に迷わずに操作できるようにしてあげるのも良いと思います。
 
ckeditorはドキュメントがあるので、全体像をなんとなく把握できますが、
やはり細かいところはソースを読むしかないのも現状です。
 
また機会があれば、ckeditorに関する情報をお伝えします!