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

【问题标题】：How to add class or attribute automatically to img tags in CKEditor?如何在 CKEditor 中自动向 img 标签添加类或属性？
【发布时间】：2013-09-17 15:50:46
【问题描述】：

我正在使用 CKEditor 3.6 版

我想自动将class="newsleft" 添加到通过所见即所得添加的任何图像标签中。

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

谁能告诉我下面的代码应该放在哪里？

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

【问题讨论】：

试试看stackoverflow.com/questions/7836349/… 答案很详细

标签： javascript ckeditor

【解决方案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.htmlParser.element.addClass 从 CKEditor 4.4 开始可用。您可以使用该版本之前的this.attributes[ 'class' ]。

【讨论】：

当使用 image2（增强图像）插件而不是默认图像时，您的小提琴不再与 CKEditor 4.10.1 一起使用。任何指导如何实现它...？另请参阅stackoverflow.com/questions/52689549/…

【解决方案2】：

这是另一种方法：

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

【讨论】：

只有这对我有用，我正在使用 ckeditor v.4.9.2 和 Laravel 的背包
这种方法在首次添加图像时效果很好。但是如果在编辑中打开并保存，添加的类就会丢失。有什么想法吗？

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

我已经尝试过了，它有效！

【讨论】：

【解决方案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"

【讨论】：