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

Question

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

Как мне правильно настаивать EditorContent?

Answer 1

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

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

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

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

Answer 2

Я обнаружил, что должен 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 3

Здесь есть куча полезных ответов, поэтому я хочу добавить это демо jsfiddle. Это показывает, как это работает в действии. Для сохранения и получения содержимого редактора, здесь 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));
}

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

Answer 4

Настаивать

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

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

Воссоздать ContentState

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

Answer 5

Если вы собираетесь сохранить необработанный контент в свою базу данных с помощью AWS Lambda, я рекомендую преобразовать в ваш код Lambda строки, чтобы вы могли избежать одинарных кавычек; Затем сохраните его:

const escapedValueToStore = JSON.stringify(contentStateObject).replace(/'/g, '\'\'');

Это немного сложно, но в основном потому, что вы структурируете свой объект данных при отправке в Lambda (через API-шлюз) с помощью POST.

Затем вам нужно проанализировать этот объект, который затем вернет ваш ContentState в объект, не выходя из одинарных кавычек. Вы вводите вышеупомянутый код, чтобы избежать кавычек.

При использовании клиентской части данных все, что вам нужно сделать, это снова проанализировать его при преобразовании из необработанного:

EditorState.createWithContent(convertFromRaw(JSON.parse(rawContentState))

РЕДАКТИРОВАТЬ

Если подумать, я думаю, вы можете просто преобразовать в строку и также избежать содержимого на стороне клиента.

Answer 6

Я сделал это для draftjs с reactjs. Если вы все еще сталкиваетесь с этой проблемой: вы можете увидеть решение в этом видео

В основном вам нужно преобразоватьToRaw, а затем JSON.stringify. Затем это можно отправить на ваш сервер в виде строки. Чтобы отобразить его, сделайте запрос GET для этих конкретных данных, затем JSON.parse и затем convertFromRaw. Передайте это в другой RichTextEditor как editorState, но установите readOnly={true}