CKEditor5在自定义数据处理器中使用模型

Question

我正在玩CKEDitor5,我试图创建一个自定义数据处理器.我想在toData转换中使用该模型,但是使用该view/DocumentFragment对象调用该方法.所以我的问题是如何将其转换为model/DocumentFragment对象(或如何从数据处理器访问模型).

更新(因为它不适合评论):让我试着更详细地解释我到底尝试做什么(或者我已经做到目前为止).我想出了如何使用访问模型本身,但这似乎是一个糟糕的解决方案,因为你也指出了它.

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

一方面,该toView方法很简单,因为可以假设BBCode到HTML的转换已经实现(在我的例子中).从HTML中加载编辑器数据似乎是微不足道的(通过Markdown处理器使用的相同过程).

另一方面,从模型数据而不是视图转换为BBCode似乎更容易.主要是因为view/DocumentFragment视图树的对象和其余部分几乎只是DOM或HTML的另一种表示形式.我真的不关心粗体是否<b>或<strong>我只是想知道text节点是否具有该bold属性.

通过使用该模型,我希望使用语义而不是HTML中使用的表示.基本上将所有HTML标签映射到他们的BBCode等价物似乎有点无意义(即使CKE5在提供一致的HTML标签方面做得很好).所以从我的角度来看,使用模型更有意义.从语义表示转换为"数据格式"比转换为"数据格式"(视图树,DOM,HTML,摩尔斯电码)然后在此之后创建"表示图"更容易.

很长一段时间阻止我们使用RTE或WYSIWYG编辑器的确是从HTML转换为BBCode的难度.现在CKE5有了模型,它似乎很容易转换成任何东西,因为它不仅是HTML格式的独立,而是编辑器中显示的HTML(这不能说是视图树,因为它完全是HTML中的编辑 - 至少它不是满足任何可能产生的,但仍然不够好).

另外:我只是Plugin设置了一个DataProcessor,因为这就是Markdown特性所做的那样(在某个地方的文档中).这是个坏主意吗？

再次感谢您的回答.

Answer 1

最近,在CKE5 GitHub上提出了类似的问题.问题是关于将JSON数据作为编辑器输出,但是您提出的主题也部分涵盖.

(...)如何从数据处理器访问模型

直接在模型上运行存在一些问题和风险.这不是推荐的东西.它在链接的帖子中解释.

(...)我的问题是我怎么能把它转换成一个 model/DocumentFragment

与直接在模型上运行相比,这是一种更好(风险更小)的方法.但是,我不得不问 - 为什么要转换模型？也许有更好的解决方案来解决你的问题？

要在视图和模型之间进行转换,必须使用DataController#toView和DataController#toModel.DataController实例可在Editor#data.要在数据处理器中使用它,数据处理器需要访问编辑器实例.

我建议创建自己的编辑器类,扩展一个CKE5编辑器类.然后,在新的编辑器类构造函数中,覆盖数据处理器并传递编辑器实例.就像是:

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( ... );
    // ...
  }
}

这些只是为了显示方向,而不是工作/测试样本.

不过,我想知道为什么你坚持使用模型而不是视图来生成编辑器输出.

BTW.如果你继续这样实现它,整个过程将会有点愚蠢:).首先,您将获得模型数据,然后将其转换为视图(在数据处理器中),然后编辑器将获取视图数据并将其转换回模型:).所以也许你也会对覆盖Editor#setData方法感兴趣,所以不会发生不必要的转换.