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

Question

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!

Halliday

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

} );

Depilatory

Exactly what I was looking for. Thank you very much Jacek! Still don't understand why the dataProcessor-rule from my question no longer works with image2, though; it does with image. But don't mind. I got what I wanted :-) – Halliday

one more question. I implement this on some kind of a blog. On post creation I use your snippet to add the img-fluid class to the added images. However, when I edit the post without touching the images (hence not loading the widget), the class is removed from the image. Do you know which event I can re-use to prevent this? Thank you! – Halliday

If I understand you correctly, you are executing ACF on some level of your application logic (like setting data etc.) which removes your class. If this is an issue, you can add an additional rule for ACF. It can be done by extraAllowedContent configuration option, like config.extraAllowedContent = 'img(img-fluid)'. More info about this configuration option here: ckeditor.com/docs/ckeditor4/latest/api/… – Herakleion

About your issue with dataProcessor.dataFilter rule - it's simply not executed during image insertion when used with Enhanced Image plugin, so this rule doesn't affect this single use case. – Herakleion

config.extraAllowedContent = 'img(img-fluid)' was what I was looking for. However, it didn't had any effect when put into my custom ckeditor.config.js. I had to write it into the initialization of the plugin; and due to that had to write it as extraAllowedContent : 'img(img-fluid)', Thank you! – Halliday