Черновик js. Persist EditorContent в базу данных

Question

Я пытаюсь сохранить draft-jsEditorContent в базу данных, а затем снова и снова заново создать объект EditorContent. Но EditorContent.getPlainText() удаляет богатый текстовый контент. Я не знаю, как это сделать.

Как должным образом сохранить EditorContent?

Answer 1

Метод getPlainText(), как следует из его названия, возвращает только обычный текст без какого-либо богатого форматирования. Вы должны использовать функции convertToRaw() and convertFromRaw() для сериализации и десериализации содержимого редактора.

Вы можете импортировать их таким способом, если это необходимо (при условии, что вы используете ES6)

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

Если вам нужно экспортировать HTML вместо см https://medium.com/@rajaraodv/how-draft-js-represents-rich-text-data-eeabb5f25cf2#9260 (не уверен, что вы можете импортировать содержимое обратно из HTML, хотя)

Answer 2

Чтобы сохранить

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

Теперь состояние содержание может быть сохранено в качестве JSON строки.

Воссоздать ContentState

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

Answer 3

Я обнаружил, что я должен stringify и parse объект RawContentState при чтении и сохранение в базе данных.

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

Есть куча полезных ответов здесь, поэтому я хочу, чтобы добавить этот jsfiddle demo. Он показывает, как он работает в действии. Для сохранения и извлечения содержимого редактора здесь используется local storage. Но для базы данных, основной принцип тот же.

В этом демонстрационном примере вы можете увидеть простой компонент редактора, когда вы нажимаете на SAVE RAW CONTENT TO LOCAL STORAGE, мы сохраняем текущее содержимое редактора как строку в локальном хранилище. Мы используем convertToRaw и JSON.stringify для него:

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

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

Если после этого вы перезагрузите страницу, ваш редактор будет инициализирован с содержанием и стилей, что вы сохранить. Мы принимаем in constructor, мы читаем соответствующее местное хранилище, а с JSON.parse, convertFromRaw и createWithContent методы инициализируем редактор с ранее сохраненным контентом.

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 
    }; 
}