Question

我正在玩CKEditor4，我想向我插入的所有图像添加一个自定义类。不幸的是，似乎适用于在插入的<p>图像上添加类的dataFilter规则不适用于<img>图像。我使用的图片插件是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

如果只想为插入的图像添加自定义类，则可以轻松地监听dialogHide事件：

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

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

} );

CKEditor4 EnhancedImage Plugin图像添加事件或：如何向图像添加自定义类

1 个答案: