Javascript 如何在CKEditor中将类或属性自动添加到img标记？

我正在使用CKEditor版本3.6

我想自动将

class=“newsleet”

添加到通过WYSIWYG添加的任何图像标记中

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

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

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

基本上，把它放在listener中，就可以了（3.x和4.x）（）：

---

从CKEditor 4.4开始提供。您可以在该版本之前使用

this.attributes['class']

。

由于这个主题在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，“默认值”：“img响应”

我已经试过了，效果很好

版本：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”：“您的类名”

---

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

---

以下是另一种方法：

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

---

试着看一看答案是非常详细的当你使用image2（增强图像）插件而不是默认图像时，你的小提琴不再使用CKEditor 4.10.1。如何实现它的任何指导。。。？另外，请仅参考对我有效的方法，我使用的是ckeditor v.4.9.2和backpack for Larvelth。首次添加图像时，这种方法效果很好。但如果在“编辑并保存”中打开，则添加的类将丢失。有什么想法吗？

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