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

How to add class or attribute automatically to img tags in CKEditor?

提问by user2286483

I'm using CKEditor version 3.6

我正在使用 CKEditor 3.6 版

I want to automatically add class="newsleft"to any image tag added through the WYSIWYG.

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

I've seen a few posts that mention dataProcessor but have no idea which file this should be added or how to do it.

我看过一些提到 dataProcessor 的帖子，但不知道应该添加哪个文件或如何添加。

Can someone tell me where I would place the following code?

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

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

回答by oleq

Basically put it in instanceReadylistener and it will be fine (3.x and 4.x) (fiddle):

基本上把它放在instanceReady监听器中就可以了（3.x 和 4.x）（小提琴）：

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.htmlParser.element.addClassis available since CKEditor 4.4. You can use this.attributes[ 'class' ]prior to that version.

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

回答by Marco

Here's another approach:

这是另一种方法：

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

回答by taylor michels

this worked for me in 3.6

这在 3.6 中对我有用

add the following code to config.js

将以下代码添加到 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';
    }
});

回答by Bryan Colbert

Because of this topic is being found in Google very high, I might help people by answering the question: how to add a default class when inserting an image in CKeditor. This answer is for CKeditor 4.5.1. as this is the latest version right now.

因为这个话题在谷歌上的搜索率很高，我可能会通过回答这个问题来帮助人们：如何在 CKeditor 中插入图像时添加默认类。此答案适用于 CKeditor 4.5.1。因为这是现在的最新版本。

1. Look up image.js in /ckeditor/plugins/image/dialogs/image.js
2. Search for d.lang.common.cssClass
3. You will find: d.lang.common.cssClass,"default":""
4. Edit it with your class name(s) such as: d.lang.common.cssClass,"default":"img-responsive"

1. 在 /ckeditor/plugins/image/dialogs/image.js 中查找 image.js
2. 搜索 d.lang.common.cssClass
3. 你会发现：d.lang.common.cssClass,"default":""
4. 使用您的类名对其进行编辑，例如：d.lang.common.cssClass,"default":"img-responsive"

I've tried this and it works!

我试过这个，它有效！

回答by Sky Yip

in Version: 4.5.3

在版本：4.5.3

1. Look up image.js in /ckeditor/plugins/image/dialogs/image.js
2. Search for editor.lang.common.cssClass
3. You will find: editor.lang.common.cssClass,"default":""
4. Edit it with your class name(s) such as: editor.lang.common.cssClass,"default":"your-class-name"

1. 在 /ckeditor/plugins/image/dialogs/image.js 中查找 image.js
2. 搜索 editor.lang.common.cssClass
3. 你会发现：editor.lang.common.cssClass,"default":""
4. 使用您的类名对其进行编辑，例如：editor.lang.common.cssClass,"default":"your-class-name"