CKEditorの編集領域でpタグにmarginが設定されてしまうのを回避する方法

f:id:ryoutaku_jo:20190713151019p:plain

【結論】

・デCKEditorでは、デフォルトの書式で入力した文章はpタグで出力されるが、ブラウザCSSによってmarginが設定されてしまい、意図せぬ空白が生まれてしまう

・divタグであれば、ブラウザCSSによる影響を受けないので、書式を「標準(div)」にすれば、空白は生じない

・デフォルトでdivタグを有効にする設定も存在する

【目次】

【本題】

前回の記事でも紹介しましたが、ChromeなどのブラウザはデフォルトのCSSを持っており、それにより意図せずデザインが崩れる事があります。

ryoutaku-jo.hatenablog.com

今回つまずいたのが、CKEditorの編集領域のpタグです。

CKEditorでは、デフォルトの書式で入力した文章はpタグで出力されます。

pタグは、ブラウザCSSによって、以下の様なmarginが設定されています。

f:id:ryoutaku_jo:20190711224205p:plain

f:id:ryoutaku_jo:20190711224154p:plain

本来は文章同士は空白が無い様にしたいので、ブラウザCSSが邪魔です。

しかしCKEditorの編集領域は、JavaScriptで生成される関係上、通常の方法ではリセットCSSが適用されません。

ファイル一式をホストすれば、CKEditor側のCSSファイルでpタグのmarginの設定を追記してやれば何とか出来そうですが、今回はCDNを使っているので、別の方法でこの空白に対処する事にしました。

divタグであれば影響は受けない

CKEditorでは入力文字の書式を選択できますが、そこで標準(div)を選択すると、pタグではなくdivタグで出力されます。

これによりブラウザCSSのmarginによる影響を回避出来ます。

CKEDITOR.replace( 'editor', {
  //ツールバーのカスタマイズ
  toolbarGroups: [
    { name: 'styles',    groups: [ 'styles' ] },
    { name: 'paragraph', groups: [ 'align' ] },
    { name: 'links',     groups: [ 'links' ]},
    { name: 'insert',    groups: [ 'insert' ]},
  ],

  //不要なツールバーのボタンを削除
  removeButtons:
    'Styles,FontSize,Font,Italic,Underline,Strike,Subscript,Superscript,JustifyBlock,' +
    'Flash,Table,HorizontalRule,Smiley,SpecialChar,PageBreak,Iframe,Unlink,Anchor',

  //書式の選択肢
  format_tags: 'div;h1;h2;h3',
});

f:id:ryoutaku_jo:20190713154041p:plain

f:id:ryoutaku_jo:20190713154053p:plain

デフォルトでdivタグを適用させる方法

なお先ほどの方法だと、毎回書式を設定する必要があります。

デフォルトでdivタグを設定する場合は、以下のコードで実装可能です。

  //標準文章がpタグではなくdivタグで囲われる様に変更(pタグはブラウザCSSの影響で余計なmarginが適用される為)
  enterMode: CKEDITOR.ENTER_DIV,

参考情報

https://ckeditor.com/docs/ckeditor4/latest/features/format.html

https://ckeditor.com/docs/ckeditor4/latest/features/enterkey.html

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

CMS機能の改修を通して、フロントエンド側の開発は、開発完了を定義がしづらいと改めて感じた。

ユーザーにとっての使いやすさを考慮しだすと、画面構成やサイト導線など、拘り出せばいくらでも改良の余地がある。

一方で、バックエンドの開発であれば、ユーザーにとっての使いやすさを考慮しても、要件を分解すれば、特定の機能を追加するだけなので、「〇〇が出来る」という明確な完了の定義が設定しやすい。

完了の定義が曖昧だと、手戻りの発生などによる作業の遅延に繋がるので、フロント側も関わる開発に着手する際は、完了の定義をより明確にする必要性を感じました。

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

残り・・・「7900時間!」