ckeditor5 创建具有属性的元素“图像”答案

【问题标题】：ckeditor5 create element "image" with attributesckeditor5 创建具有属性的元素“图像”
【发布时间】：2019-10-17 12:33:58
【问题描述】：

我正在尝试创建一个自定义插件以从我已经构建的媒体浏览器中插入图像。我想为图像附加一些属性。无论我尝试什么，它只插入带有src 和alt 属性的图像。换句话说，我的图像总是缺少data-source 和class 属性。我已经尝试将数据属性键设置为dataSource，但这也不起作用。

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

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

【问题讨论】：

文档在哪里定义了所有元素的架构？到处都找不到。

标签： ckeditor5

【解决方案1】：

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

首先，您需要使用适当的规则扩展the schema，告知模型编辑器中允许给定属性。

第二件事是告诉编辑如何convert给模型结构的属性，反之亦然。

不幸的是，图像转换器相当复杂，因为图像总是用<figure> 包裹。您可以在下面找到代码和指向如何创建此类转换器的工作示例的链接（转换器是基于 CKEditor5 的图像插件的source code 创建的）。就本示例而言，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

【讨论】：