ckeditor5 - ckeditor5 创建具有属性的元素“图像”
问题描述
我正在尝试创建一个自定义插件以从我已经构建的媒体浏览器中插入图像。我想为图像附加一些属性。无论我尝试什么,它只会插入带有src
andalt
属性的图像。换句话说,我的图像总是缺少data-source
andclass
属性。我已经尝试过 data 属性键,dataSource
但这也不起作用。
const imageElement = writer.createElement( 'image', {
'src': src,
'alt': alt,
'data-sources': dataSources,
'class': cls
} );
editor.model.insertContent( imageElement, editor.model.document.selection );
任何想法或建议将不胜感激。
解决方案
您需要做两件事来处理图像的新属性。
首先,您需要使用适当的规则扩展模式,这些规则通知模型编辑器中允许给定属性。
第二件事是通知编辑器如何将给定的属性转换为模型结构,反之亦然,使用适当的转换器。
不幸的是,图像转换器相当复杂,因为图像总是用<figure>
. 您可以在下面找到代码和指向如何创建此类转换器的工作示例的链接(转换器是根据CKEditor5 的图像插件的源代码创建的)。就本示例而言,该属性作为图像元素的data-source
属性存储在模型中。dSource
editor.model.schema.extend( 'image', { allowAttributes: 'dSource' } );
editor.conversion.for( 'upcast' ).attributeToAttribute( {
view: 'data-source',
model: 'dSource'
} );
editor.conversion.for( 'downcast' ).add( dispatcher => {
dispatcher.on( 'attribute:dSource:image', ( evt, data, conversionApi ) => {
if ( !conversionApi.consumable.consume( data.item, evt.name ) ) {
return;
}
const viewWriter = conversionApi.writer;
const figure = conversionApi.mapper.toViewElement( data.item );
const img = figure.getChild( 0 );
if ( data.attributeNewValue !== null ) {
viewWriter.setAttribute( 'data-source', data.attributeNewValue, img );
} else {
viewWriter.removeAttribute( 'data-source', img );
}
} );
} );
推荐阅读
- machine-learning - 训练人脸检测器/分类器的合适方法是什么?
- python - 计算图像中两个像素之间的距离
- c# - net core 5.0 .FirstOrDefault()' 无法翻译
- html - 有没有一种方法可以通过单击图像将您带到使用超链接的页面?
- sql - 为什么我的结果中不能包含另一个表中的列?
- python-3.x - 使用python从数据透视表显示详细信息选项中读取生成的excel表
- kubernetes - 网络插件为 calico 时 kubelet 不启动
- kubernetes - Kubernetes 入口重定向和重写
- javascript - 使用 ES6 语法解析编译的默认导出
- vuex - Quasar 框架与 VueX