将 CSS 类添加到空段落

编程问答 2022-04-24

问题描述

有没有办法将 css 类名添加到 ckeditor 中的空段落，以便我可以用 css 定位它们？

ckeditor 中的空段落并不是真正的空段落，因为它们包含 br 标签，所以我不能使用 :empty 来定位它们。

解决方法

ckeditor empty paragraph

据我所知，好消息是空段落中的那些 <br> 有一个属性，使它们易于定位。

将来，您可能会使用像这样的纯 CSS 解决方案。

p:has(> br[data-cke-filler="true"]) {
    /* styles here */
}

现在，您必须直接设置
的样式。 根据您要完成的任务，也许将 css 应用于 <br> 就足够了。

br[data-cke-filler="true"] {
    /* styles here */
}

如果您能够在 ckeditor 中运行 javascript。这在今天可以轻松完成。

示例：使用 jQuery

$( "p:has(br[data-cke-filler="true"])" ).addClass( "MyEmptyParagraphsClass" );

或

$( "br[data-cke-filler="true"]" ).parent().addClass( "MyEmptyParagraphsClass" );

示例：使用原生 Javascript

var brs = Document.querySelectorAll("br[data-cke-filler="true"]");

brs.forEach(function(br) {
  br.classList.add("MyEmptyParagraphsClass");
});
,

在 CKEditor 4 中，您可以有一个 configuration file。

您可以添加 custom config with the options here。

就您而言，您可能需要以下选项：

config.ignoreEmptyParagraph = false;
config.fillEmptyBlocks = false; // Prevent filler nodes in all empty blocks.

同时在 CKEditor 5 中，您可以尝试这些关于 Block Widget 的文档：

ckeditor5