CKEditorの編集領域でpタグにmarginが設定されてしまうのを回避する方法
【結論】
・デCKEditorでは、デフォルトの書式で入力した文章はpタグで出力されるが、ブラウザCSSによってmarginが設定されてしまい、意図せぬ空白が生まれてしまう
・divタグであれば、ブラウザCSSによる影響を受けないので、書式を「標準(div)」にすれば、空白は生じない
・デフォルトでdivタグを有効にする設定も存在する
【目次】
【本題】
前回の記事でも紹介しましたが、ChromeなどのブラウザはデフォルトのCSSを持っており、それにより意図せずデザインが崩れる事があります。
今回つまずいたのが、CKEditorの編集領域のpタグです。
CKEditorでは、デフォルトの書式で入力した文章はpタグで出力されます。
pタグは、ブラウザCSSによって、以下の様なmarginが設定されています。
本来は文章同士は空白が無い様にしたいので、ブラウザ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', });
デフォルトでdivタグを適用させる方法
なお先ほどの方法だと、毎回書式を設定する必要があります。
デフォルトでdivタグを設定する場合は、以下のコードで実装可能です。
//標準文章がpタグではなくdivタグで囲われる様に変更（pタグはブラウザCSSの影響で余計なmarginが適用される為）
enterMode: CKEDITOR.ENTER_DIV,
