Concrete CMS の CKEditor で特定のタグが消える問題の対応

Concrete CMS の CKEditor で特定のタグが消える問題

Concrete CMS が使用している CKEditor は、間違ったソースを入力すると自動で訂正してくれる機能があります。
しかし、たとえば昔はNGだったが現在はOKである仕様があり、例えば a 要素の中に h3 要素を含めるのは、元々はNGでしたが、現在は問題ありません。

しかし、CKEditor は古いHTMLの仕様に基づいているため、もし上のようなソースを入力して保存すると、CKEditor が自動で下のように修正してしまいます。

対処法

この問題を解決するには、 CKEDITOR.dtd の設定を変更することで、どの要素の内容にどの要素が許可されるかの設定を変更することができます。

Class Dtd (CKEDITOR.dtd) | CKEditor 4 API docs

Concrete CMS でこの設定を変更するには、Config ファイル application/config/site.php を作成し、次のように記述します。

<?php
$dtd = <<<END
CKEDITOR.dtd['a']['h3'] = 1;
CKEDITOR.dtd['a']['span'] = 1;
END;

return [
    'sites' => [
        'default' => [
            'editor' => [
                'ckeditor4' => [
                    'editor_function_options' => $dtd
                ],
            ],
        ],
    ],
];

CKEditor 側の詳しい設定の解説は CKEditor の公式ドキュメントに譲りますが、この設定のポイントはサイトの Config キー editor.ckeditor4.editor_function_options に JavaScript コードを設定している点です。この手法を使えば、 CKEDITOR.dtd に限らずさまざまな CKEditor のカスタマイズが可能になります。

無事設定変更できたら、冒頭と同じ HTML をソースに入力して保存しても、 a 要素が h3 要素の内側に勝手に移動することはありません。