将 CSS 类添加到空段落

Question

有没有办法将 css 类名添加到 ckeditor 中的空段落，以便我可以用 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 */
}

如果您能够在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");
});