サイドプロジェクトで JavaScript の WYSWIG エディタの CKEditor というのを触る機会があった。

https://ckeditor.com/ckeditor-5

これにはいろいろなプラグインがあり、HTML を直接編集するプラグインを使いたかったのだけどちょっと苦労したのでメモしておく。ちなみに CKEditor のバージョンは 5 です。

CKEditor プラグイン

CKEditor でプラグインを使うためには、基本的には自分でプラグイン取り込んで配布ファイルを自前でビルドする必要がある。github からクローンして手元でビルドしても大丈夫だけど、さすがに大変なのでオンラインビルドツールが用意されている。

https://ckeditor.com/ckeditor-5/online-builder/

ここで任意のプラグインを選択しビルドされたファイルをサーバーにアップロードして script src で読み込めば良い。あとは、利用するプラグインに応じで config を設定する必要がある。

ちなみに <script> タグでビルドされたプラグインを読みこむだけでは使えないので注意。公式サイトにも書いてある。

—

ただ、この方法だと自分で配布環境を用意しないといけないのでめんどくさい。そこで便利な方法として公式プラグインが全部入った配布ファイルが用意されている。

https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/predefined-builds.html#superbuild

これを使うが非常に楽で今回はこのビルドを使った。ただ、デメリットもあるので考慮したほうがよい。

• 不要なプラグインも全て入るので読み込みが遅くなる。
• 不要なプラグインを明示的に除去しないとだめ。
  • ここに詳しく書いてある

ちなみに、Source Editing はデフォルトではセキュリティのために編集できるタグの種類がかなり制限されている。それを緩和するには下記の設定をいれる。

htmlSupport: {
    allow: [
        {
            name: /.*/,
            attributes: true,
            classes: true,
            styles: true
        }
    ]
}

このようにすべて許可するのが楽だが誰でも投稿できるところでこれをすると脆弱性となるので注意する。管理者しか使えないような場面では大丈夫だと思うが。

Source Editing のバグ

Source Editing で inline 要素の中に <br> で改行をいれると要素が２つに分かれてしまうというバグがあった。github で issue になっているがなかなかなおらなさそうだった。

https://github.com/ckeditor/ckeditor5/issues/1068

暫定対応としては schema に下記の対応をいれた。CKEditor の内部編集モデルを理解していないため、これでなおる理屈はよく分かっていない。とりあえずは解決したので紹介しておく。

editor.model.schema.extend('softBreak', {
  allowAttributesOf: '$text'
});