自定义样式化UL/LI元素

CKEditor: Custom styling UL/LI elements

本文关键字：LI 元素 UL 样式 自定义      更新时间：2023-09-26

如何自定义CKEditor编写特定标签的方式?

我在一个小工具中使用CKEditor来帮助我们的编辑团队使用响应模板生成准备发送的HTML电子邮件。因此，我将内联样式应用于元素(而不是使用CSS类)。

我在为无序列表实现样式方面有点挣扎。我需要对UL和LI元素都应用style属性，但我似乎无法通过Styles列表找到这样做的方法。

我还没有找到任何解决方案，我的第一个想法，"有一个单一的风格影响多个元素以不同的方式"，所以我现在想知道我是否可以配置CKEditor，以便每当它写一个UL元素，它包括必要的样式块，和同上的LI元素。

这可能吗?

您可以使用dataProcessor来强制元素的构建方式:

dataProcessor.htmlFilter.addRules( {
    elements: {
        ul: function( el ) {
            if ( !el.attributes.style) {
                el.attributes['style'] = 'list-style: square';
            }
        },
        li: function( el ) {
            if ( !el.attributes.style) {
                el.attributes['style'] = 'color: red';
            }
        }
    }
});

这样，当ul元素写入时，它将具有list-style: square样式，li元素将具有color: red样式。

重要的是要注意，该值可以使用ckeditor的getData()函数或在从编辑模式切换到源模式并返回编辑模式时使用。

这是一个工作的jsfield:
https://jsfiddle.net/v6zf2vwm/

相关文章：