CKEditor5 use model in custom Data Processor

问题

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.

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

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

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.

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.

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

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?

Thanks again for your answer.

回答1:

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.

(...) my question is that how could I convert that into a 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?

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.

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

These are just to show the direction, not working/tested samples.

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

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.

来源：https://stackoverflow.com/questions/46885490/ckeditor5-use-model-in-custom-data-processor

标签

ckeditor

ckeditor5