添加 CSS class 到空段落

Question

有没有办法在 ckeditor 中的空段落中添加 css class 名称，以便我可以使用 css 定位它们？

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

Answer 1

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

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

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

目前，您要么必须直接设置
的样式。根据您要完成的目标，也许将 css 应用于 <br> 就足够了。

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

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

示例：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");
});

Answer 2

在 CKEditor 4 中，你可以有一个 configuration file.

在您的情况下，您可能需要这些选项：

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

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

Add CSS class to empty paragraphs