Ckeditor adds blank paragraphs when applying style

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

I initiate CKeditor with the following html:

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

When I select a paragraph and apply the 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 a way to prevent CKEditor from adding paragraphs with unused space?

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

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

+6
source share
2 answers

You might want to consider the following questions:

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

You can see my post here for more information:
How to configure ckeditor in order not to pack content in a <p> block?

The following configuration parameter prevents the editor from inserting unused space into blank paragraphs:

  config.fillEmptyBlocks = false; 


Was additional code added after applying only one style?
What style did you apply, is there additional code added, regardless of the style you use?
What happens if you select text and press the bold button?
Does the code you display appear in the original view of the editor or on the last page that you use to display your content?

Be healthy,
Joe

+8
source

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

 p:empty { display:none } 

I understand that this is a dirty solution, but in most cases it works great and has a minimal contribution to development and functionality.

+2
source

Source: https://habr.com/ru/post/896395/


All Articles