Question

我正在尝试将draft-js的{{1}}保留到数据库，然后再次读取并重新创建EditorContent对象。但EditorContent剥夺了富文本内容。我不知道怎么做。

如何正确保留EditorContent.getPlainText()？

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

我发现在阅读并保存到数据库时，我必须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

坚持

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

现在内容状态可以保存为JSON字符串。

重新创建ContentState

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

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

如果之后您重新加载页面，您的编辑器将使用您保存的内容和样式进行初始化。在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 5

如果您要使用AWS Lambda将原始内容保存到数据库中，建议您在Lambda代码中进行字符串化处理，以便随后转义单引号；然后将其存储：

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

这有点涉及，但这主要是因为您在使用POST发送到Lambda（通过API网关）时将数据对象进行了字符串化。

然后，您需要解析该对象，该对象随后将ContentState返回到一个Object中，而不会转义单引号。您可以执行上述代码来转义引号。

在使用数据客户端时，您需要做的只是在从原始格式转换时再次对其进行解析：

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

编辑

再三考虑一下，我想您可以将其字符串化，然后在客户端转义内容escape

草案js。将EditorContent持久化到数据库

5 个答案: