Плагин CKEditor4 EnhancedImage Событие добавления изображения или: Как добавить пользовательский класс в изображение

Question

Я играю с CKEditor4 и хочу добавить пользовательский класс для всех изображений, которые я вставил.К сожалению, похоже, что правило dataFilter, которое работает для добавления классов на вставленные <p>, не работает на <img> -изображениях.Плагин изображений, который я использую, является extendedImage ("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

Если вы просто хотите добавить собственный класс для вставленных изображений, вы можете легко прослушать событие dialogHide:

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

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

} );