最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Ckeditor adds empty paragraphs when applying a style - Stack Overflow

programmeradmin3浏览0评论

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'} }

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'} }

Share Improve this question edited Sep 5, 2011 at 9:02 Mark asked Sep 1, 2011 at 10:09 MarkMark 3,2713 gold badges33 silver badges57 bronze badges
Add a comment  | 

2 Answers 2

Reset to default 12

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

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.

发布评论

评论列表(0)

  1. 暂无评论