Question

我正在使用CKEditor版本3.6

我想自动将class="newsleft"添加到通过WYSIWYG添加的任何图片标记。

我看过几篇提到dataProcessor的帖子，但不知道应该添加哪个文件或者怎么做。

有人可以告诉我在哪里放置以下代码吗？

editor.dataProcessor.htmlFilter.addRules(
{
    elements:
    {
        img: function( element )
        {
            if ( !element.attributes.alt )
                element.attributes.alt = 'An image';
        }
    }
} );

Answer 1

基本上把它放在instanceReady监听器中，它会很好（3.x和4.x）（fiddle）：

CKEDITOR.replace( 'editor', {
    plugins: 'wysiwygarea,toolbar,sourcearea,image,basicstyles',
    on: {
        instanceReady: function() {
            this.dataProcessor.htmlFilter.addRules( {
                elements: {
                    img: function( el ) {
                        // Add an attribute.
                        if ( !el.attributes.alt )
                            el.attributes.alt = 'An image';

                        // Add some class.
                        el.addClass( 'newsleft' );
                    }
                }
            } );            
        }
    }
} );

自CKEditor 4.4起，

CKEDITOR.htmlParser.element.addClass可用。您可以在该版本之前使用this.attributes[ 'class' ]。

Answer 2

这对我来说在3.6

将以下代码添加到config.js

CKEDITOR.on('dialogDefinition', function (ev) {
    // Take the dialog name and its definition from the event data.
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;

    // Check if the definition is image dialog window 
    if (dialogName == 'image') {
        // Get a reference to the "Advanced" tab.
        var advanced = dialogDefinition.getContents('advanced');

        // Set the default value CSS class       
        var styles = advanced.get('txtGenClass'); 
        styles['default'] = 'newsleft';
    }
});

Answer 3

这是另一种方法：

CKEDITOR.on( 'instanceReady', function( evt ) {
  evt.editor.dataProcessor.htmlFilter.addRules( {
    elements: {
      img: function(el) {
        el.addClass('img-responsive');
      }
    }
  });
});

Answer 4

由于此主题在Google中非常高，我可以通过回答这个问题来帮助人们：如何在CKeditor中插入图像时添加默认类。这个答案适用于CKeditor 4.5.1。因为这是最新版本。

在/ckeditor/plugins/image/dialogs/image.js中查找image.js
搜索d.lang.common.cssClass
你会发现：d.lang.common.cssClass，＆＃34;默认＆＃34;：＆＃34;＆＃34;
使用您的班级名称编辑，例如：d.lang.common.cssClass，＆＃34;默认＆＃34;：＆＃34; img-responsive＆＃34;

我试过这个并且它有效！

Answer 5

版本：4.5.3

在/ckeditor/plugins/image/dialogs/image.js中查找image.js
搜索editor.lang.common.cssClass
你会发现：editor.lang.common.cssClass，“default”：“”
使用您的类名编辑它，例如：editor.lang.common.cssClass，“default”：“your-class-name”

如何在CKEditor中自动为img标签添加类或属性？

5 个答案: