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

Question

如何将自定义类或 ID 添加到 CKEditor 中的文本段落？我想从 DB 中加载可能的类，并将它们写入到加载 CKE 时它们所在的列表中。身份证只需当场制作。类和 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;
                    }
                }
            });
        }
    }
});

Answer 2

我已经四处走动并做了这样的事情（我使用的是CKeditor 4.4.7）：

editor.addCommand('colSm1', {
    exec: function (editor) {
    var $element = editor.elementPath().block;

    if ($element.getAttribute('class') == null) {
        $element.addClass('col-sm-1');
    }
});