温馨提示:本文翻译自stackoverflow.com,查看原文请点击:其他 - ckeditor5 create element "image" with attributes

其他 - ckeditor5创建具有属性的元素“图像”

发布于 2020-03-27 11:04:55

我正在尝试创建一个自定义插件,以从我已经构建的媒体浏览器中插入图像。我想在图像上附加一些属性。无论我尝试什么,它都只会插入带有srcand alt属性的图像换句话说,我的图像总是缺少data-sourceand class属性。我已经尝试将数据属性键设置为,dataSource但这还是行不通的。

const imageElement = writer.createElement( 'image',  {
    'src': src,
    'alt': alt,
    'data-sources': dataSources,
    'class': cls
} );
editor.model.insertContent( imageElement, editor.model.document.selection );

任何想法或建议,将不胜感激。

查看更多

查看更多

提问者
JRoss
被浏览
15
Mateusz Samsel 2019-07-03 23:04

您需要做两件事来处理图像的新属性。

首先,您需要使用适当的规则来扩展架构,以通知模型在编辑器中允许给定的属性。

第二件事是通知编辑者如何使用适当的转换器将给定属性转换为模型结构,反之亦然。

不幸的是,图像转换器非常复杂,因为图像总是用包裹<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 );
        }
    } );
} );

链接到工作示例:https : //codepen.io/msamsel/pen/pXKRed?editors=1010

发布
问题

分享
好友

手机
浏览

扫码手机浏览