Question

TLDR；我想将已编译的Vue JS组件插入CKEditor可编辑主体，作为插件向下转换过程的一部分。

我有一个自定义CKEditor图像插件，用于CMS风格的网站。用户通过从图像选择器（在CKEditor外部）选择其图像来插入图像，然后执行CKEditor命令以插入图像：

const model = this.editor.model;

model.change(writer => {
  const imageElement = writer.createElement('custom-image');
  const insertAtSelection = findOptimalInsertionPosition(model.document.selection, model);
  model.insertContent(imageElement, insertAtSelection);
});

在插件的init方法内部，有一个插件可将“ custom-image”元素注册到架构中：

const schema = this.editor.model.schema;
schema.register('custom-image', {
  isObject: true,
  isBlock: true,
  allowIn: '$root'
});

然后，注册了一个下垂处理程序（也在插件的init方法内部）：

const conversion = this.editor.conversion;
// A similar handler is used for editingDowncast
conversion.for('dataDowncast').elementToElement({
  model: 'custom-image',
  view: (modelElement, viewWriter) => {
    return writer.createContainerElement('div', {
      class: 'custom-image',
    });
  }
});

现在，我有一个Vue组件，它引用了我想插入到新创建的div.custom-image（ContainerElement）内的DOM节点。

我尝试在downcastDispatcher上创建一个处理程序，像这样：

this.editor.editing.downcastDispatcher.on("insert:custom-image", (evt, data, conversionApi) => {
  const el = ... // Vue component is created here
  const viewElement = conversionApi.mapper.toViewElement(data.item);
  const domNode = view.domConverter.mapViewToDom(viewElement);
  domNode.appendChild(el);
});

问题是1）viewElement似乎尚未添加到DOM中（因此mapViewToDom返回未定义），以及2）如果我等待viewElement被将Vue组件的内容添加到DOM中（使用setTimeout，这是一种令人讨厌的技巧），因为该架构不允许使用，因此大部分内容已被剥离。

要添加的Vue组件非常复杂，并且会与CKEditor之外的应用程序对话。使用CKEditor的模型重新创建组件会非常混乱。它也可以在应用程序的视图侧使用，因此能够在编辑和查看应用程序的一部分时重用相同的组件会很不错。

那么，解决这个问题的最佳方法是什么？

Answer 1

简而言之-CKEditor5旨在防止这种情况。

CKEditor 5实现了自定义数据模型。为了将数据加载到该模型，您需要为每个模型都具有view-> model converters   您希望编辑器支持的内容。那你需要   模型->视图转换器，以使该内容可编辑（   需要在编辑器中呈现以进行编辑）。最后，您需要   配置架构，有时自定义某些功能，例如   输入，以便他们知道您加载到的内容的含义   编辑器以及如何对其进行修改。

换句话说，由于数据模型的缘故，功能需要实现特定内容（标签，   属性等）来处理-从数据加载到   用于编辑，编辑和数据检索的渲染。

通过https://github.com/ckeditor/ckeditor5/issues/705 通过https://stackoverflow.com/a/47775840/1225741

我有一个类似的用例，但是有React。就我而言，我创建了一个自定义iframe元素来显示由我的Web应用程序呈现的图表，但从长远来看，由于编辑器可能加载了数十个图表，因此它不可行。它变得沉重且无法快速使用。

目前，我正在研究Web组件作为对此限制的可能解决方案。 AFAIK it Should Work™，但我还必须编写一个演示来确认这种方法。

您找到解决迈克尔问题的方法了吗？

将Vue组件插入CKEditor 5可编辑主体

1 个答案: