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

发布于 2024-12-02 13:59:38 字数 997 浏览 1 评论 0原文

当我将样式应用于选定的段落时,我的 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; 添加到我的配置文件

Update 事实证明这个问题是由样式本身引起的,它是自定义的样式。这段代码就是问题所在:{name : 'Heading1', element : 'p class= "subheadingsecondlevel"},一旦我将其更改为:{name : 'Heading1', element : 'p', 属性 : {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;"> </span></p>
<p>
    <span id="cke_bm_173S" style="display: none;"> </span>Hi, this a text!<span id="cke_bm_173E" style="display: none;"> </span></p>
<p>
    <span style="display: none;"> </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'} }

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

难得心□动 2024-12-09 13:59:38

您可能需要考虑这些:

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

您可以在此处查看我的帖子以获取更多信息:
如何将 ckeditor 配置为不将内容包裹在

中阻止?

以下配置设置将阻止编辑器在空段落中插入不间断空格:

  config.fillEmptyBlocks = false;

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

祝你好运,

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

凉宸 2024-12-09 13:59:38

或者,如果全部失败,您可以使用 CSS 选择器伪类 ':empty' 并给它一个 'display:none'。在实践中,您可以将这一行添加到 CSS 中:

p:empty {
  display:none
}

我知道这是一个肮脏的解决方案,但它在大多数情况下都能完美运行,并且对设计和功能的影响最小。

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文