[baserCMS]記事編集領域内に入れたHTMLソースが自動整形されてそのまま入らないとき

  • 2
    いいね
  • 0
    コメント

baserCMSは、記事編集にCkEditorを利用してます。
フロントエンジニアの方で作成したHTMLを、固定ページの記事編集領域にそのまま入れ込むのがよくある場面として挙げられるのですが、その際に、HTMLソース表示にして保存したあと、再度開いた際に、CkEditor側で自動整形されて、HTML構造が保存時と異なってしまう症状があります。

想定している対象者

  • baserCMSでウェブサイトを制作をしている方
  • HTMLコーディングを主とするフロントエンジニア
  • PHPer

発生状況

HTMLの内容(html5)を、固定ページの編集領域をソース表示に切替え、そのまま保存したあと、再度同じページを管理側で開いたとき。

原因

CkEditorが、HTML構造を整形し、保存時のHTML構造内容を変えてしまうこと。

対処

以下の内容を追記して適用する。

  • 対象ファイル: /js/admin/ckeditor/config.js
  • 適用後、ブラウザのキャッシュを削除すること
CKEDITOR.editorConfig = function( config ) {
    CKEDITOR.dtd.a.div = 1;
    CKEDITOR.dtd.a.p = 1;
    CKEDITOR.dtd.label.div = 1;
};

他にも必要な例外処理(html5では構造上、OKとなっている事柄)を入れておくと良いかもですね。

CKEDITOR.dtd.a.span = 1;
CKEDITOR.dtd.a.h2 = 1;
CKEDITOR.dtd.a.h3 = 1;
CKEDITOR.dtd.a.h4 = 1;

参考記事