将CSS类添加到空段落

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

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

回答

据我所知,好消息是<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");
});


以上是将CSS类添加到空段落的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>