More than 3 years have passed since last update.

CKEditorで余計な<ul>タグが出てくるのを防ぐ

Posted at 2020-07-09

ハマったこと

記事のコンテンツをCKEditorを使って管理しているのですが、以下のタグを保存したときに悲劇は起こりました...

<li>ほげほげ</li>
<li>ふがふが</li>
<li>なむなむ</li>

CKEditor君 :「<ul>タグなかったから追加しといたわ~ 感謝してや」

わい :「いや、テンプレート側に<ul>書いてあるんだけど余計なことしないで(# ﾟДﾟ)」

CKEditorの仕様で保存すると <ul> タグが消えてしまうらしい。

ドキュメントを見てみると CKEDITOR.dtd.$intermediate なるものがありました。

List of elements that are not to exist standalone that must live under it's parent element.

これだ...

CKEditorの config.js に以下の設定を追加し、CKEditorの <li> に対する振る舞いを強制的に削除しました。

delete CKEDITOR.dtd.$listItem['li'];
delete CKEDITOR.dtd.$intermediate['li'];

delete CKEDITOR.dtd.$intermediate['li'];

これだけで、行けそうな気がしたんですがうまくいかなかったので $listItem を削除することでうまくいきました。

私はCKEditorをGCSの画像をいい感じに扱いたいために使っていて基本的にHTMLタグを直書きなので問題ないのですが、エディタを使っている人は多分この設定を入れるだけだと、リストを挿入するときに <dt> や <dd> になっちゃうだけだと思うので注意が必要です(多分)