Question

我想配置 CKEditor（版本4.3.2），以便为内容中的每个 Image2小部件图形标记添加一个类属性。我使用以下代码（基于How to add CSS classes and an ID to paragraphs in CKEditor?）：

CKEDITOR.on("instanceReady", function(e)
{
    var editor = e.editor;


    pClass = 'additional_class',
    pClassRegexp = new RegExp(pClass, 'g');

    editor.dataProcessor.htmlFilter.addRules(
    {
        elements:
        {
            figure: function(element)
            {
                // If there's no class, assign 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;
            }
        }
    });
});

不幸的是，我只能为没有类'caption'的图形元素添加类，但它不再是一个小部件。

Answer 1

您可以使用一些配置选项使用CKEditor 4.4及更高版本执行此操作。以下是CKEditor's image2 documentation的相关说明：

感谢CKEditor 4.4中引入的CKEDITOR.config.image2_alignClasses选项，您可以使用CSS类来设置图像对齐。此外，CKEDITOR.config.image2_captionedClass选项允许您将自定义类分配给标题图像的元素....

config.image2_alignClasses = [ 'image-left', 'image-center', 'image-right' ];
config.image2_captionedClass = 'image-captioned';

将生成类驱动的，可设置样式的标记，使您可以避免使用不灵活且非语义的内联CSS代码：

<figure class="image-captioned image-right">
    <img alt="MyImage" src="myimage.png" />
    <figcaption>MyCaption</figcaption>
</figure>

Answer 2

这将为现有或新图像添加类

$('.tblClass').each(function(){
    if($(this).find('.rows').length == 0){
        $(this).hide();
    }
});

强制CKEditor将类添加到Image2小部件

2 个答案: