Entwurf js. Persist EditorContent zu Datenbank

Question

Ich versuche, draft-js 's EditorContent in der Datenbank persistent zu machen, dann lesen und erstellen Sie das EditorContent-Objekt erneut. Aber EditorContent.getPlainText() entfernt Rich-Text-Inhalt. Ich weiß nicht, wie ich es sonst tun soll.

Wie behalte ich richtig EditorContent?

Answer 1

Die getPlainText()-Methode gibt, wie der Name schon sagt, nur den Nur-Text ohne umfangreiche Formatierung zurück. Sie sollten die convertToRaw() and convertFromRaw() Funktionen verwenden, um den Inhalt des Editors zu serialisieren und zu deserialisieren.

Sie können sie auf diese Weise importieren, falls erforderlich: (vorausgesetzt, Sie ES6 verwenden)

import {convertFromRaw, convertToRaw} from 'draft-js'; 

Wenn Sie HTML müssen stattdessen exportieren, siehe https://medium.com/@rajaraodv/how-draft-js-represents-rich-text-data-eeabb5f25cf2#9260 (nicht sicher, dass Sie die Inhalte wieder von HTML importieren können, obwohl)

Answer 2

Um

zu bestehen

const contentStateJsObject = ContentState.toJS(); 
const contentStateJsonString = JSON.stringify(contentStateJS); 

jetzt Inhalt Zustand kann als JSON-String beibehalten werden.

neu zu erstellen ContentState

const jsObject = JSON.parse(jsonString); 
const contentState = new ContentState(jsObject); 

Answer 3

ich gefunden habe, dass ich muss stringify und parse das RawContentState Objekt aus, wenn in der Datenbank zu lesen und zu speichern.

import { convertFromRaw, convertToRaw } from 'draft-js'; 

// the raw state, stringified 
const rawDraftContentState = JSON.stringify(convertToRaw(this.state.editorState.getCurrentContent())); 
// convert the raw state back to a useable ContentState object 
const contentState = convertFromRaw(JSON.parse(rawDraftContentState)); 

Answer 4

Es gibt eine Reihe von nützlichen Antworten hier, damit ich diese jsfiddle demo hinzufügen möchten. Es zeigt, wie es in Aktion funktioniert. Zum Speichern und Abrufen des Inhalts des Editors wird hier local storage verwendet. Aber für Datenbank-Fall, das Grundprinzip das gleiche.

In dieser Demo sehen Sie eine einfache Editor-Komponente. Wenn Sie auf SAVE RAW CONTENT TO LOCAL STORAGE klicken, speichern wir den aktuellen Editor-Inhalt als String zum lokalen Speicher. Wir verwenden convertToRaw und JSON.stringify für sie:

saveRaw =() => { 
    var contentRaw = convertToRaw(this.state.editorState.getCurrentContent()); 

    localStorage.setItem('draftRaw', JSON.stringify(contentRaw)); 
} 

Wenn nach, dass Sie die Seite neu zu laden, wird der Editor mit dem Inhalt und Arten initialisiert werden, was Sie speichern. In constructor lesen wir die entsprechende lokale Speichereigenschaft und mit JSON.parse, convertFromRaw und createWithContent Methoden initialisieren Editor mit dem zuvor gespeicherten Inhalt.

constructor(props) { 
    super(props); 

    let initialEditorState = null; 
    const storeRaw = localStorage.getItem('draftRaw'); 

    if (storeRaw) { 
    const rawContentFromStore = convertFromRaw(JSON.parse(storeRaw)); 
    initialEditorState = EditorState.createWithContent(rawContentFromStore); 
    } else { 
    initialEditorState = EditorState.createEmpty(); 
    } 

    this.state = { 
    editorState: initialEditorState 
    }; 
}