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;
                    }
                }
            });
        }
    }
});

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');
    }
});

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

2 个答案: