CKeditor adds extra <p> tags

Question

CKeditor adds many <p>&nbsp</p> tags for all new lines when editing as HTML source. I found a discussion:

http://drupal.org/node/669114

But I don't understand, how to fix it. If anybody fixed this, please, tell me, what should I write in CKeditor config file.

Answer 1

You need to set ckeditor configuration setting

config.enterMode

to proper value

(1) The default creates a paragraph element each time the "enter" key is pressed:

config.enterMode = CKEDITOR.ENTER_P; // inserts <p></p>

(2) You can choose to create a "div" element instead of a paragraph:

config.enterMode = CKEDITOR.ENTER_DIV; // inserts <div></div>

• The setting that you are looking for *

(3) If you prefer to not wrap the text in anything, you can choose to insert a line break tag:

config.enterMode = CKEDITOR.ENTER_BR; // inserts <br />

The application developer indicates that using the ENTER_BR setting is not recommended. http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.enterMode

There are three more settings that are somewhat related to this subject:

config.fillEmptyBlocks
config.forceEnterMode
config.ignoreEmptyParagraph

A complete list of the available configuration options can be found here: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html

Answer 2

The answers on this question are correct, but they don't explain how to implement this in a Drupal-way:

If your ckeditor is printing this:

<p>&nbsp;</p>

You indeed need to change the configuration of ckeditor to stop filling empty blocks: So config.fillEmptyBlocks = false; is correct, but you need to tell Ckeditor's implementation that in to Drupal.

You can do this by writing a hook_editor_js_settings_alter as follows:

/**
 * Implements hook_editor_js_settings_alter().
 */
function HOOK_editor_js_settings_alter(array &$settings) {
  // inspect which settings the editor currently has
  // kint($settings['editor']['formats']['basic_html']['editorSettings']);
  $settings['editor']['formats']['basic_html']['editorSettings']['fillEmptyBlocks'] = false;
}

This will force CKeditor to output instead:

<p></p>

Which means you could target and hide them with CSS as follows:

p:empty {
  display: none;
} 

Answer 3

Most of the writers at my work use MS Word to write articles and then they paste it into the CKEditor WYSIWYG. If you install and enable the Ckeditor Paragraph Paste Fix module it will remove the the <p>&nbsp</p> in real time.

Answer 4

I believe you are talking about the "Enter mode" in CKEditor setting. You got <p> everytime you use "Enter". You can change the "Enter mode" from <p> to <br> with the following steps.

1. go to "Configuration > CKEditor"
2. edit a input format (if you use Full, edit the Full input format)
3. under "Cleanup and Output" setting, change the "<p>" to "<br>" on "Enter mode".
   Done

Answer 5

In the "Advanced options" section of CKEditor profile add this:

config.fillEmptyBlocks = false;