CKEditorのテンプレート機能で、ブロック要素に改行（br）が勝手に入るのを防ぐ方法

【結論】

・CKEditorのテンプレート機能でHTMLをエディタ上に挿入する際、要素が含めれていないブロック要素内に、 タグが勝手に挿入されてしまう問題がある。

・対策としては、挿入するHTMLに対して、class（またはid）を設定し、そのclassのCSSに タグをdisplay: noneする設定を記述する

・または、 タグが勝手に挿入されてしまうブロック要素内に、コメントアウトを記述しても防げる

【目次】

CKEditorのテンプレート機能で、改行（br）が勝手に入る問題
対策：コメントアウトを挿入する
参考情報

【本題】

CKEditorのテンプレート機能で、改行（br）が勝手に入る問題

CKEditorには、任意のHTMLをエディタ内に挿入して利用できるテンプレート機能が実装されています。

しかし、このテンプレート機能ですが、厄介な仕様が存在します。

それは、改行（ タグ）が自動挿入されてしまうという点です。

このように、画像を均一幅で横並びに配置する為のブロックを、テンプレートに用意した際の話です。

以下のようなHTMLを用意して、それを挿入するように設定を変更しました。

<table border="0" align="center" cellspacing="0" cellpadding="0" style="width:960px;" class="cke_show_border">
  <tbody>
    <tr>
      <td style="text-align: center;width: 450px;height: 100px;"></td>
      <td style="text-align: center;width: 450px;height: 100px;"></td>
    </tr>
  </tbody>
</table>

この<tb>タグ内に画像を挿入して貰う事で、簡単に横並びを実現しようと考えました。

しかし、実際に使ってみると、たまに画像がズレてしまう問題が発生しました。

出力されたHTMLのソースを確認してみると、<tb>タグの中に、入力していない筈の タグが勝手に挿入されていました。

この タグの上下どちらかに画像が配置されるのですが、その配置箇所が違うとズレが生じる事が分かりました。

そして、どうやら<tb>タグに限らず、ブロック要素であれば、全て タグが挿入されてしまう事が分かりました。

なお、テキストなど他の要素が既に記述されている場合は、 タグは挿入されませんでした。

公式ドキュメントを読んでも、 タグを挿入しないようにするという設定が見当たらなかったので、CSSなどを駆使して無理やり タグが入らないように修正して見ました。

対策：コメントアウトを挿入する

対策として思いついたのは、挿入するHTMLに対して、class（またはid）を設定し、そのclassのCSSに タグをdisplay: noneする設定を記述する方法です。

しかし、CKEditorのエディタは、iframeを使って生成されているので、そのままで大本のページに適用されているスタイルが利用できません。

利用するようにするには、contentsCssプロパティでCSSのパスを指定してやる必要があるのですが、正直面倒です。

もっと簡単に出来る方法を探していると、コメントアウトを挿入すると、それを要素として認識して、 タグが挿入されない仕組みを見つけました。

<table border="0" align="center" cellspacing="0" cellpadding="0" style="width:960px;" class="cke_show_border">
  <tbody>
    <tr>
      <td style="text-align: center;width: 450px;height: 100px;"><!--brタグ削除用--></td>
      <td style="text-align: center;width: 450px;height: 100px;"><!--brタグ削除用--></td>
    </tr>
  </tbody>
</table>