Ckeditor5上传图片后如何添加自定义属性和class

问题说明

我有一个自己的图像上传逻辑。 但是当我上传图像时，我想为图像添加一个自定义属性和一个自定义class。
所以我的图片上传后应该是这样的：

<img class="lazy-load" data-src="https://test.com/image.jpg" />

但默认情况下，上传后的图像在ckeditor编辑器看起来是这样的：

<img src="https://test.com/image.jpg" />

解决办法

你好！ 你可以使用例如 DowncastDispatcher 用于监听图像插入并使用 DowncastWriter 将适当的类添加到您的 <figure> 元素（默认情况下包装 <img> 元素）：

        editor.conversion.for( 'downcast' ).add( dispatcher => {
           dispatcher.on( 'insert:image', ( evt, data, conversionApi ) => {
               // Remember to check whether the change has not been consumed yet and consume it.
               if ( conversionApi.consumable.consume( data.item, 'insert' ) ) {
                   return;
               }
               const writer = conversionApi.writer;
               const viewFigure = editor.editing.mapper.toViewElement( data.item );
               writer.addClass( 'lazy-load', viewFigure );
               // Remember to stop the event propagation.
               evt.stop();
           } );
       } );

标签2： Ckeditor5 Ckeditor

地址：https://www.cundage.com/article/1620346942313730049.html