ckeditor5 创建带有属性的元素“image”

Question

我正在尝试创建一个自定义插件来插入来自我已构建的媒体浏览器的图像。我想为图像附加一些属性。无论我尝试什么，它都只会插入带有

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 );

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

Answer 1

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

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

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

不幸的是，图像转换器非常复杂，因为图像总是用

<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