CKEditor 4 Enhanced Image Plugin 图片添加事件或：如何添加自定义 class 到图片

Question

我正在使用 CKEditor4，我想为我插入的所有图像添加自定义 class。不幸的是，用于在插入的 <p> 上添加 classes 的 dataFilter 规则似乎不适用于 <img>-images。我使用的图像插件是 enhancedImage ("image2")，我不上传图像，我从 fileBrowser 实例中选择它。

我的代码：

$(function(){            
        var editor = CKEDITOR.replace( 'article-ckeditor', {
            customConfig: '/vendor/ckeditor/ckeditor.config.js',                
            filebrowserImageBrowseUrl: '/laravel-filemanager?type=Images',
            filebrowserImageUploadUrl: '',
            filebrowserBrowseUrl: '',
            filebrowserUploadUrl: '',
            on: {
                instanceReady: function (ev) {
                    ev.editor.dataProcessor.dataFilter.addRules( {
                        elements : {
                            img: function( el ) {
                                el.attributes['class'] = 'img-fluid'; 
                            }
                        }
                    });
                }
            }                
        });
});

对我来说，似乎只是没有触发事件。但是我在文档中找不到任何相关信息...

感谢您的帮助！

Answer 1

如果您只想为插入的图像添加自定义 class，您可以轻松收听 dialogHide 事件：

editor.on( 'dialogHide', function( evt ) {
  var widget = evt.data.widget;

  if ( widget && widget.name === 'image' && widget.element ) {
    widget.element.addClass( 'img-fluid' );
  }

} );

CKEditor 4 Enhanced Image Plugin 图片添加事件或：如何添加自定义 class 到图片

CKEditor4 EnhancedImage Plugin Image added event or: How to add custom class to image

javascript

ckeditor

ckeditor4.x