CKEditor：自定义样式 UL/LI 个元素

Question

如何自定义 CKEditor 写入特定标签的方式？

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

我在为无序列表实现样式方面遇到了一些困难。我需要将样式属性应用于 UL 和 LI 元素，但我似乎无法通过样式列表找到这样做的方法。

对于我的第一个想法，我还没有找到任何解决方案，"have a single style affect multiple elements in different ways"所以我现在想知道我是否可以配置 CKEditor，以便无论何时写入 UL 元素，它都包含必要的样式块，并且LI 元素同上。

这可能吗？

Answer 1

您可以使用 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 样式。

It's important to note that the value is available using the getData() function of the ckeditor or once you switch from edit to source mode and back to edit mode.

这是一个有效的 jsfiddle：
https://jsfiddle.net/v6zf2vwm/

CKEditor：自定义样式 UL/LI 个元素

CKEditor: Custom styling UL/LI elements

javascript

ckeditor