如何在CKEditor中为段落添加CSS类和ID？

Question

如何在CKEditor中向文本段落添加自定义类或ID？我想从DB加载可能的类,并将它们写入到加载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;
                    }
                }
            });
        }
    }
});