Die Grundidee, einen Blockeditor zu erstellen
Beziehen Sie sich hauptsächlich auf zwei Blockeditoren:
Gutenberg-Editor für WordPress: https://wordpress.org/gutenberg/
editorjs-Editor: https://editorjs.io/
1. Architektur
MVVM-Architektur
M-Schicht: reines JSON, siehe editorjs für diesen Punkt. Gutenbergs M-Layer ist stark an WordPress selbst gebunden (Anmerkungen + Shortcodes) und es lohnt sich nicht, darauf zu verweisen.
Schicht V: Gutenbergs Methode ist besser geeignet.
VM-Schicht: Keine.
2. Blöcke
Alle Blöcke haben zwei Zustände: Anzeigen und Bearbeiten.
Beim Anzeigen von Inhalten, die vom Blockeditor erstellt wurden, wird der Status des Blocks angezeigt.
Wenn Sie den Blockeditor zum Bearbeiten von Inhalten verwenden, lautet der Status des Blocks „Bearbeiten“.
Die Anzeige der beiden Zustände bleibt konsistent und erreicht „What you see is what you get“.
Der Edit-State-Block baut auf dem Basisblock auf.
3. Grundblock
Alle Bausteine basieren auf diesem Grundbaustein.
Hier finden Sie die wichtigsten Interaktionen im Bearbeitungsstatus des Blocks.
4. Editor-Seite
Die Hauptseite des Editors rendert Blöcke basierend auf Daten und Datenänderungen.
5. Block-Renderer
Wenn Sie den vom Blockeditor erstellten Inhalt anzeigen, müssen Sie die JSON-Daten analysieren und Blöcke basierend auf den JSON-Daten rendern.