はてだBlog(仮称)

私的なブログど真ん中のつもりでしたが、気づけばWebサイト系のアプリケーション開発周りで感じたこと寄りの自分メモなどをつれづれ述べています。2020年6月現在、Elasticsearch、pandas、CMSなどに関する話題が多めです。...ですが、だんだんとより私的なプログラムのスニペット置き場になりつつあります。ブログで述べている内容は所属組織で販売している製品などに関するものではなく、また所属する組織の見解を代表するものではありません。

CKEditorの編集ボタン・編集ダイヤログのカスタマイズ

CKEditorを使っているような人はすでに知っている話。

ただ、しばらく使っていなくて使い方を忘れた時などに、ちょいと機能を取り繕いたいという時に、間に合わせで対応するということもないわけではない。

そんな時のための自分メモ。

余分な編集ボタンを取り除く

まず、編集機能が豊富すぎて、こういう編集ボタンは不要という場合は、これ。

こちらは、見よう見まねでなんとかなりそう。 https://ckeditor.com/docs/ckeditor4/latest/guide/dev_toolbar.html

ボタンはそのままに編集ダイヤログ中の不要な編集オプションを取り除く

では、ボタンは必要なんだけど、ボタンを押した時に表示されるダイヤログ内のフォームや機能はもう少しコンパクトにしたい。

というもう少しこみいった話題。

特に、うかつにコードを修正しちゃうと整合性がとれなくなってしまうのではないかと心配するものの、そこはさすが。

これ↓をみる限り、めぼしいコードを特定さえすれば、そのコードの特定箇所から変数などを削除すれば他に影響することなく対応できそう!

https://ckeditor.com/docs/ckeditor4/latest/guide/plugin_sdk_sample_2.html

ひとまず動作させて様子を見たいというレベルで急ぎなら、次のような段取りが早い。

  1. ボタンに対応した実ファイルを特定
  2. Devloper Tools(Webサイト版)で該当のオブジェクトIDを確認
  3. 実ファイルの該当のオブジェクトIDに関するプロパティを確認
  4. elementsあるいはchildrenあるいはitemsといったプロパティがダイヤログの画面の見た目の構造におおよそ対応しているのでこれを編集
実際にやってみる

例えば、リンクを作成するボタンとダイヤログについてごにょごにょしたい。

1. ボタンに対応した実ファイルを特定

ckeditor/plugins/link/dialogs/link.js

2. Devloper Tools(Webサイト版)で該当のオブジェクトIDを確認

こちらで画面オブジェクト(例. E-mailの「件名」欄)のオブジェクトのID をポップアップで確認。 「鎖」アイコンのボタンを押して表示されたダイヤログを触ってみる。

今回は、 id : 'emailBody'

かな。

3. 実ファイルの該当のオブジェクトIDに関するプロパティを確認

link.js中のelementsあるいはchildrenあるいはitemsというプロパティ名の配列から先ほど確認した、画面オブジェクトのIDを持つ、不要な要素をコメントアウトすればよさそう。

4. elementsあるいはchildrenあるいはitemsといったプロパティがダイヤログの画面の見た目の構造におおよそ対応しているのでこれを編集

id : 'emailBody' について、

次のように対応すれば良いと思われる。 * 配下の選択肢を削りたい場合→ 対応するjsオブジェクトの配下プロパティであるitemsの配列から不要なものを削除(コメントアウト) * そのものを削除したい場合 →対応するjsオブジェクト自体を配列(今回の場合はchildren)か削除(コメントアウト

以上

その他参考ページ

プラグインの個々のダイヤログの考え方(のオススメページ)  https://docs.ckeditor.com/ckeditor4/latest/guide/dev_howtos_dialog_windows.html https://docs.ckeditor.com/ckeditor4/latest/guide/plugin_sdk_sample_1.html

Pluginとはなんぞやというところまで遡る場合の参考ページ https://docs.ckeditor.com/ckeditor4/latest/guide/dev_howtos_basic_configuration.html https://docs.ckeditor.com/ckeditor4/latest/guide/dev_example_setups.html https://docs.ckeditor.com/ckeditor4/latest/guide/dev_plugins.html