Проект js. Persist EditorContent для базы данных

Ответ 1

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

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

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

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

Ответ 2

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

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

теперь состояние содержимого может сохраняться как строка JSON.

Для воссоздания ContentState

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

Ответ 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) );

Ответ 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));
}

Если после этого вы перезагрузите страницу, ваш редактор будет инициализирован содержимым и стилями, которые вы сохраните. Becker of 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
  };
}