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

问题

I'm playing around with CKEditor4 and I want to add a custom class to all images that I inserted. Unfortunately it seems as the dataFilter rule which works for adding classes on inserted <p> does not work on <img>-images. Image plugin I use is enhancedImage ("image2") and I do not upload the image, I pick it from a fileBrowser instance.

My code:

$(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'; 
                            }
                        }
                    });
                }
            }                
        });
});

For me it seems as the event is just not fired. But I cannot find anything about it in the documentation...

Thanks for your help!

回答1:

If you just want to add a custom class for inserted images, you could easily listen to dialogHide event:

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

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

} );

来源：https://stackoverflow.com/questions/52689549/ckeditor4-enhancedimage-plugin-image-added-event-or-how-to-add-custom-class-to