Ckeditor adds empty paragraphs when applying a style

10
votes

My CKEditor is adding a lot of unnecessary tags when applying a style to a selected paragraph

I initiate CKeditor with the following html:

<p>
    Hi, this a text!</p>

When I select the paragraph and apply a style using the toolbar, CKEditor formats my html to the following:

<p>
    <span style="display: none;">&nbsp;</span></p>
<p>
    <span id="cke_bm_173S" style="display: none;">&nbsp;</span>Hi, this a text!<span id="cke_bm_173E" style="display: none;">&nbsp;</span></p>
<p>
    <span style="display: none;">&nbsp;</span></p>

Is there any way preventing CKEditor from adding the paragraphs with the non breaking space?

Things I've already tried are adding config.fillEmptyBlocks = false; and config.IgnoreEmptyParagraphValue = true; to my config file

Update Turns out this problem was caused by the style itself which was a custom defined style. This piece of code was the problem: {name : 'Heading1', element : 'p class= "subheadingsecondlevel"}, once I changed it to: {name : 'Heading1', element : 'p', attributes : {class : 'subheadingsecondlevel'} }

2
javascriptckeditor

2 Answers

10
votes

You might want to consider these:

config.enterMode = CKEDITOR.ENTER_BR;
config.autoParagraph = false;

You can check out my post here for more info:
How to configure ckeditor to not wrap content in <p> block?

The following config setting will stop the editor from inserting a non-breaking space in empty paragraphs:

  config.fillEmptyBlocks = false;


Was all of the additional code inserted after applying just one style?
What style did you apply, is all the extra code inserted regardless of the style you use?
What happens if you select the text and click the bold button?
Is the code you are showing being copied from the source view of the editor or from the final page that you use to display your content?

Be Well,
Joe

3
votes

Or, if all fails, you can use the CSS selector pseudo-class ':empty' and give it a 'display:none'. In practice, you add this line to your CSS:

p:empty {
  display:none
}

I understand it's a dirty solution but it works perfectly in most cases and has minimal inpact on design and functionality.