Question

如何自定义CKEditor编写特定标记的方式？

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

我正在努力为无序列表实现样式。我需要将样式属性应用于UL和LI元素，但我似乎无法通过样式列表找到方法。

我没有找到任何解决方案，我的第一个想法，“有一种风格以不同的方式影响多个元素”所以我现在想知道我是否可以配置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样式。

值得注意的是，使用ckeditor的getData()功能或从编辑切换到源模式并返回编辑模式时，可以使用该值。

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

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

1 个答案: