ckeditor - 如何在 CKEditor 中向段落添加 CSS 类和 ID？

Question

如何向 CKEditor 中的文本段落添加自定义类或 ID？我想从数据库加载可能的类并将它们写入加载 CKE 时它们所在的列表。 ID 可以当场简单地补上。类和 ID 可用于将一段文本标记为脚注或标题等。

<小时/>

需要明确的是，我不想使用下拉框更改文本的可见样式，我想添加可用于在保存元素后设置元素样式的 CSS 类 - 取决于它所在的位置使用过。

Answer 1

给你。此代码将使用后续 id 对段落进行编号，并且还会将自定义类附加到尚未分配的每个段落。

var idCounter = 0,
    pClass = 'myCustomClass',
    pClassRegexp = new RegExp( pClass, 'g' );

CKEDITOR.replace( 'editor1', {
    on: {
        instanceReady: function() {
            this.dataProcessor.htmlFilter.addRules({
                elements: {
                    p: function( element ) {
                        // If there's no class, assing the custom one:
                        if ( !element.attributes.class )
                            element.attributes.class = pClass;

                        // It there's some other class, append the custom one:
                        else if ( !element.attributes.class.match( pClassRegexp ) )
                            element.attributes.class += ' ' + pClass;

                        // Add the subsequent id:
                        if ( !element.attributes.id )
                            element.attributes.id = 'paragraph_' + ++idCounter;
                    }
                }
            });
        }
    }
});