Ckeditor在应用样式时会添加空段落

Question

当我为选定的段落应用样式时，我的CKEditor会添加许多不必要的标签。

我使用以下HTML初始化CKeditor：

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

当我选择段落并使用工具栏应用样式时，CKEditor会将我的HTML格式化为以下内容：

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

有没有办法防止 CKEditor 在添加非间断空格的段落时？我已经尝试了将 config.fillEmptyBlocks = false; 和 config.IgnoreEmptyParagraphValue = true; 添加到我的配置文件中，但都没有起作用。更新：事实证明这个问题是由自定义样式本身引起的。这段代码是问题所在：{name : 'Heading1', element : 'p class= "subheadingsecondlevel"}，一旦我将其改为：{name : 'Heading1', element : 'p', attributes : {class : 'subheadingsecondlevel'} }，问题就得到解决了。

- Mark

Answer 1

你可能想考虑以下问题：

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

您可以在此处查看我的帖子，了解更多信息：
如何配置 CKEditor 以不将内容包装在 <p> 块中？

以下配置设置将阻止编辑器在空段落中插入非断行空格：

  config.fillEmptyBlocks = false;

您应用样式后，是不是所有额外的代码都被插入了？
您应用了哪种样式？无论使用何种样式，是否都会插入额外的代码？
如果您选择文本并单击粗体按钮会发生什么？
您展示的代码是从编辑器的源视图中复制还是从用于显示内容的最终页面中复制的？

祝好，
乔

- codewaggle

---

谢谢，但我不介意CKEditor将文本包装在段落标签中，我只是不想让它添加无用的开销到代码中。 - Mark

所有额外的代码都是在应用一个样式后插入的吗？您应用了哪种样式，无论使用哪种样式，所有额外的代码都被插入了吗？如果选择文本并单击粗体按钮会发生什么？您展示的代码是从编辑器的源视图还是最终用于显示内容的页面中复制的？ - codewaggle

我在答案中添加了另一个配置设置，它可以停止非断行空格，但不会停止段落。 - codewaggle

原来一些自定义类在js中没有正确定义，导致了这个问题。这段代码是问题所在：{name : 'Heading1', element : 'p class= "subheadingsecondlevel"}，一旦我将其更改为：{name : 'Heading1', element : 'p', attributes : {class : 'subheadingsecondlevel'} }，一切都完美地解决了。 - Mark

太好了。如果有人遇到类似的问题，但原因不同，我将我的评论中的问题复制到了我的答案中。 - codewaggle

Answer 2

如果所有方法都失败了，您可以使用CSS选择器伪类“：empty”，并将其设置为“display:none”。实际操作中，您可以在CSS中添加以下行：

:empty{
    display:none;
}

p:empty {
  display:none
}

我知道这样做并不优雅，但在大多数情况下它可以完美运行，并对设计和功能影响很小。

- JPA

---

我得到了非常相似的结果 - 如果UL是文本区域中的第一个块，则为空的p块。 摆脱它的唯一方法是使用这个CSS hack。 - Ivan

输入一个 hr，我得到了一个空的 p...然后我让它去见鬼了。 - benzkji

@benzkji - 去地狱了吗？这对我来说意味着你的设计正在起火。但基本上就是这样。你能否详细说明一下？ - JPA