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

f:id:ryoutaku_jo:20190731103919p:plain

【結論】

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

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

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

【目次】

【本題】

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

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

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

それは、改行(<br>タグ)が自動挿入されてしまうという点です。

f:id:ryoutaku_jo:20190731111647g:plain

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

以下のような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>タグ内に画像を挿入して貰う事で、簡単に横並びを実現しようと考えました。

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

f:id:ryoutaku_jo:20190731112349p:plain

f:id:ryoutaku_jo:20190731112417p:plain

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

f:id:ryoutaku_jo:20190731112521p:plain

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

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

f:id:ryoutaku_jo:20190731113113p:plain

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

f:id:ryoutaku_jo:20190731113129p:plain

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

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

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

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

f:id:ryoutaku_jo:20190731114342p:plain

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

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

<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>

f:id:ryoutaku_jo:20190731114914p:plain

これでズレが生じる事は無くなりました(結構荒技ですが・・・)

これらのテクニックは、他のJavaScriptプラグインでも流用できるかもしれませんね!(試してないですが・・・)

参考情報

<iframe>: インラインフレーム要素 - HTML: HyperText Markup Language | MDN

jQueryでインライン要素をHTML内で改行すると発生する空白を削除する実験 | BlackFlag

《今日の学習進捗(3年以内に10000時間に向けて)》

のど痛い・・・(体調不良・・・)

学習開始からの期間 :236日
今日までの合計時間:2265h
一日あたりの平均学習時間:9.6h
今日までに到達すべき目標時間:2155h
目標との解離:110h
「10,000時間」まで、

残り・・・「7735時間!」