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

位置:首页>文章>详情   分类: Java教程 > 编程技术   阅读(508)   2023-06-26 07:54:18

问题说明

我有一个自己的图像上传逻辑。 但是当我上传图像时,我想为图像添加一个自定义属性和一个自定义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

相关阅读

 CKEditor5 完整示例参考图片如下: &lt;!DOCTYPE html&gtl; &lt;html lang="en"&gtl; &lt;head&gtl; ...
CKEditor 5 由即用型编辑器构建和构建所基于的 CKEditor 5 Framework 组成。在 Vue.js 应用程序中使用 CKEditor 5 的最简单方法是选择一种富文本编辑器...
问题描述我一直在遵循自定义构建过程https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/quick-st...
问题说明我有一个自己的图像上传逻辑。 但是当我上传图像时,我想为图像添加一个自定义属性和一个自定义class。所以我的图片上传后应该是这样的:&lt;img class="lazy-load" ...
一、概述 在本文中,我们将介绍如何将 CKEditor 与 Spring Boot 结合使用。在本教程中,我们将导入一个包含大量数据的 XML 文档,编写使用 GET
学习使用 Gradle 配置 JUnit 5、它的不同模块以及如何使用它们来创建和执行测试。 请注意,JUnit 5 在运行时需要 Java 8。 1. JUnit 5 Gradle 依赖 要通...
学习使用 Maven 配置 JUnit 5、不同的 JUnit 模块以及如何使用这些模块来创建和执行测试。 请注意,JUnit 5 在运行时至少需要 Java 8。 1. JUnit 5 Mav...
Eclipse 为 JUnit 测试用例提供了出色的工具支持。在 Eclipse 中为 JUnit 测试用例配置代码模板 是加快测试开发的完美补充。 学习在 Eclipse 中创建和导入 JUn...
在 JUnit 5 中,非常不鼓励编写有序测试,在某些情况下,测试执行顺序可能成为测试应用程序功能的重要因素,例如 集成测试。 例如,我们可能希望对用户管理模块进行集成测试,其中测试应按以下方式...
JUnit 5 假设 类提供static 方法来支持基于假设的条件测试执行。失败的假设会导致测试中止。 假设ns 通常在继续执行给定测试方法没有意义时使用。在测试报告中,这些测试将被标记为通过。...