CKEditor5 verwenden Modell in benutzerdefinierten Datenprozessor

Question

Ich spielte mit CKEDitor5, und ich versuchte, einen benutzerdefinierten Datenprozessor zu erstellen. Ich möchte das Modell in der toData Umwandlung verwenden, aber die Methode wird mit dem view/DocumentFragment Objekt aufgerufen. Meine Frage ist also, wie kann ich das in ein model/DocumentFragment Objekt umwandeln (oder wie man von einem Datenprozessor auf das Modell zugreift).

aktualisiert (da es nicht in einen Kommentar passen): Lassen Sie mich versuchen, besser zu erklären, was genau ich versuche zu tun (oder ich habe schon so weit) in etwas mehr Detail. Ich habe herausgefunden, wie man das Modell selbst benutzen kann, aber das schien eine schlechte Lösung zu sein, wie Sie es auch gezeigt haben.

Also im Grunde möchte ich eine DataProcessor erstellen, um die Editor-Daten in BBCode zu konvertieren, was vernünftig genug klingt, denke ich.

Auf der einen Seite ist die toView Methode einfach, da die BBCode zu HTML-Konvertierung angenommen werden kann (in meinem Fall bereits implementiert). Und aus HTML scheint es trivial zu sein, die Editor-Daten zu laden (nach dem gleichen Prozess wie der Markdown-Prozessor).

Auf der anderen Seite scheint es einfacher zu BBCode von den Modelldaten als von der Ansicht zu konvertieren. Hauptsächlich, weil das view/DocumentFragment Objekt und der Rest der View-Struktur so ziemlich nur eine weitere Repräsentation des DOM oder HTML ist. Ich interessiere mich nicht wirklich, ob fett ist <b> oder <strong> ich will nur wissen, ob der text Knoten das bold Attribut oder nicht hat.

Mit dem Modell hoffe ich, mit der Semantik und nicht mit der Darstellung in HTML zu arbeiten. Es erscheint ein wenig sinnlos, im Grunde alle HTML-Tags ihren BBCode-Äquivalenten zuzuordnen (selbst wenn CKE5 gute Arbeit leistet, konsistente HTML-Tags bereitzustellen). Aus meiner Sicht macht die Verwendung des Modells mehr Sinn. Die Umwandlung von einer semantischen Repräsentation in ein "Datenformat" ist einfacher als die Konvertierung in ein "Datenformat" (Ansichtsbaum, DOM, HTML, Morsecode) und dann die Erstellung einer "Repräsentationskarte".

Lange Zeit war es die Schwierigkeit, von HTML zu BBCode zu konvertieren, was uns daran hinderte, RTEs oder WYSIWYG-Editoren zu verwenden. Jetzt hat CKE5 ein Modell, das leicht zu konvertieren ist, da es nicht nur vom HTML-Format, sondern auch vom HTML-Editor unabhängig ist (dies kann nicht über den View-Tree gesagt werden, da es genau der HTML-Code ist) der Redakteur - zumindest ist es nicht das, was zufrieden stellbar produziert, aber immer noch nicht gut genug ist).

Auch: Ich habe gerade ein Plugin, den die DataProcessor setzt, wie das war, was die Markdown-Funktion Art auch tut (in der Dokumentation irgendwo). Ist das eine schlechte Idee?

Nochmals vielen Dank für Ihre Antwort.

Answer 1

Vor kurzem eine similar question was raised on CKE5 GitHub. Die Frage ist, JSON-Daten als Editor-Ausgabe zu bekommen, aber das von Ihnen angesprochene Thema wird auch teilweise behandelt.

(...), wie das Modell von einem Datenprozessor zugreifen

Es gibt bestimmte Probleme und Risiken im Zusammenhang mit direkt auf dem Modell arbeitet. Dies ist nicht empfehlenswert. Es wird im verlinkten Post erklärt.

(...meine Frage) ist, wie könnte ich das in ein model/DocumentFragment

Dies ist ein besserer (weniger riskant) Ansatz als Betrieb gerade auf dem Modell zu konvertieren. Ich muss jedoch fragen: Warum willst du vom Modell konvertieren? Vielleicht gibt es eine bessere Lösung für Ihr Problem?

Um zwischen Ansicht und Modell zu konvertieren, müsste man DataController#toView und DataController#toModel verwenden. DataController Instanz ist verfügbar unter Editor#data. Um es in einem Datenprozessor zu verwenden, benötigt der Datenprozessor Zugriff auf die Editorinstanz.

Ich würde vorschlagen, erstellen Sie Ihre eigenen Editor-Klasse, eine der CKE5-Editor-Klassen zu erweitern. Dann überschreiben Sie im neuen Editor-Klassenkonstruktor den Datenprozessor und übergeben auch die Editor-Instanz. Etwas wie:

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

Diese sind nur, um die Richtung zu zeigen, nicht funktioniert/getestete Proben.

Dennoch würde ich gerne wissen, warum Sie darauf bestehen, das Modell anstelle der Ansicht zu verwenden, um Editor-Ausgabe zu generieren.

BTW. Wenn Sie so weitermachen und es implementieren, wird der ganze Prozess ein bisschen albern :). Zuerst erhalten Sie eine Modelldaten, dann konvertieren Sie es in Ansicht (in Datenprozessor), dann wird der Editor Ansicht Daten und konvertieren Sie es zurück in das Modell :). Vielleicht sind Sie auch daran interessiert, die Methode Editor#setData zu überschreiben, damit unnötige Konvertierungen nicht stattfinden.