定制数据处理器中的CKEditor5使用模型 [英] CKEditor5 use model in custom Data Processor

问题描述

我正在与CKEDitor5玩，并且尝试创建一个自定义数据处理器。我想在 toData 转换中使用该模型，但是该方法是通过 view / DocumentFragment 对象调用的。所以我的问题是，如何将其转换为 model / DocumentFragment 对象（或如何从数据处理器访问模型）。

I was playing with CKEDitor5, and I tried to create a custom Data Processor. I'd like to use the model in the toData conversion, but the method is called with the view/DocumentFragment object. So my question is that how could I convert that into a model/DocumentFragment object (or how to access the model from a data processor).

更新（因为它不能放入评论中）：
让我试着更好地解释我到底打算做什么（或到目前为止我已经做过）多一点细节。我想出了如何使用访问模型本身，但是正如您也指出的那样，这似乎是一个糟糕的解决方案。

Update (as it cannot fit into a comment): Let me try to better explain what exactly I try to do (or I already did so far) in a bit more detail. I figured out how to use access the model itself, but that seemed like a bad solution as you also pointed it out.

所以基本上我想创建一个 DataProcessor 将编辑器数据转换为BBCode，我想这听起来足够合理。

So basically I want to create a DataProcessor to convert the editor data to BBCode, which sounds reasonable enough I guess.

一方面， toView 方法很简单，因为可以认为从BBCode到HTML的转换已经已实施（以我为例）。从HTML看来（通过Markdown处理器使用的相同过程）加载编辑器数据似乎很简单。

On one hand, the toView method is simple, as the BBCode to HTML conversion can be assumed to be already implemented (in my case). And from HTML it seems to be trivial to load the editor data (by the same process used by the Markdown processor).

另一方面，转换为BBCode来自模型数据而不是视图。主要是因为 view / DocumentFragment 对象和视图树的其余部分几乎只是DOM或HTML的另一种表示形式。我不太想知道粗体字是< b> 还是< strong> 我只是想知道文本节点是否具有 bold 属性。

On the otherhand, it seems easier to convert to BBCode from the model data rather than the view. Mostly because the view/DocumentFragment object and the rest of the view tree is pretty much just another representation of the DOM or HTML. I don't really care for whether bold is <b> or <strong> i just want to know whether the text node has the bold attribute or not.

通过使用模型，我希望使用语义而不是HTML中使用的表示形式。基本上将所有HTML标记映射到它们的BBCode等效项似乎没有意义（即使CKE5在提供一致的HTML标记方面做得很好）。因此，从我的角度来看，使用模型更有意义。从语义表示转换为数据格式比转换为数据格式（视图树，DOM，HTML，摩尔斯电码）然后在此之后创建表示图要容易得多。

By using the model, I hope to work with the semantics rather than the representation used in HTML. It seems a bit pointless to basically map all HTML tags to their BBCode equvivalents (even if CKE5 does a good job of providing consistent HTML tags). So from my point of view, using the model just makes more sense. Converting from semantic representation to a "data format" is easier than to convert to a "data format" (view tree, DOM, HTML, morse code) and then create a "representation map" after that.

很长一段时间以来，阻止我们使用RTE或WYSIWYG编辑器的原因正是从HTML转换为BBCode的困难。现在，CKE5具有模型，似乎可以轻松转换为任何模型，因为它不仅独立于HTML格式，而且独立于编辑器中显示的HTML（关于视图树，这不能说，因为它正是HTML中的HTML）。编辑器-至少它不是可内容编辑的东西，但仍然不够好。）

For a long time what blocked us from using RTEs or WYSIWYG editors were exactly the difficulty of converting from HTML to BBCode. Now CKE5 has model, which seems to be easy to convert to anything, as it is independent not just from the HTML format but the HTML displayed in the editor as well (this cannot be said about the view tree as it is exactly the HTML in the editor - at least it is not whatever contenteditable produces, but still not good enough).

也：我刚刚制作了插件设置 DataProcessor ，因为这也是Markdown功能的功能（在文档中的某个地方）。

Also: I just made a Plugin that sets the DataProcessor, as that was what the Markdown feature kind of does as well (in the docs somewhere). Is that a bad idea?

再次感谢您的回答。

推荐答案

最近，在CKE5 GitHub上提出了一个类似的问题。问题是关于将JSON数据作为编辑器输出，但是您提出的主题也被部分覆盖。

Recently, a similar question was raised on CKE5 GitHub. The question is about getting JSON data as editor output, but topic raised by you is also partially covered.

（...）从数据处理器访问模型

(...) how to access the model from a data processor

直接在模型上运行存在某些问题和风险。不建议这样做。

There are certain problems and risks connected with operating straight on the model. This is not something that is recommended. It is explained in the linked post.

（...）我的问题是如何将其转换为 model / DocumentFragment

与直接在模型上进行操作相比，这是一种更好（风险较小）的方法。但是，我不得不问-为什么要从模型转换？也许有更好的解决方案？

This is a better (less risky) approach than operating straight on the model. However, I have to ask - why do you want to convert from the model? Maybe there's a better solution to your problem?

要在视图和模型之间进行转换，必须使用 DataController＃toView 和 DataController＃toModel 。 DataController 实例可从 Editor＃data 获得。要在数据处理器中使用它，数据处理器将需要访问编辑器实例。

To convert between view and model, one would have to use DataController#toView and DataController#toModel. DataController instance is available at Editor#data. To use it in a data processor, the data processor would need access to the editor instance.

我建议创建自己的编辑器类，扩展一个CKE5编辑器类。 。然后，在新的编辑器类构造函数中，覆盖数据处理器并传递编辑器实例。像这样的东西：

I'd suggest creating your own editor class, extending one of CKE5 editor classes. Then, in the new editor class constructor, overwrite data processor and also pass editor instance. Something like:

class MyEditor extends ClassicEditor {
  constructor() {
    this.data.processor = new MyDataProcessor( this );
  }
}

class MyDataProcessor() {
  constructor( editor ) {
    this._editor = editor;
  }

  toData( viewDocumentFragment ) {
    const modelDocumentFragment = this._editor.data.toModel( viewDocumentFragment );
    // ...
  }

  toView( modelData ) {
    // ...
    this._editor.data.toView( ... );
    // ...
  }
}

这些是

仍然，我想知道为什么您坚持使用模型而不是视图来生成编辑器输出

Still, I'd like to know why you insist on using the model rather than the view to generate editor output.

BTW。如果继续这样实施，整个过程将很愚蠢:)。首先，您将获得模型数据，然后将其转换为视图（在数据处理器中），然后编辑器将获取视图数据并将其转换回模型:)。因此，也许您也会对覆盖 Editor＃setData 方法感兴趣，这样就不会发生不必要的转换。

BTW. If you go on and implement it like this, the whole process will be a bit silly :). First, you will get a model data, then convert it to view (in data processor), then the editor will take view data and convert it back to the model :). So maybe you will be also interested in overwriting Editor#setData method so unnecessary conversions won't take place.

这篇关于定制数据处理器中的CKEditor5使用模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！