35

我正在尝试将draft-js'sEditorContent保存到数据库，然后再次读取并重新创建 EditorContent 对象。但EditorContent.getPlainText()剥离了富文本内容。我不知道还能怎么做。

我该如何正确坚持EditorContent？

4

5 回答 5

50

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 导入内容)

于 2016-04-08T12:55:55.173 回答
18

我发现在读取和保存到数据库时我必须stringify和RawContentState 对象。parse

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) );
于 2017-03-14T04:11:14.440 回答
10

这里有一堆有用的答案，所以我想添加这个jsfiddle 演示。它显示了它是如何工作的。为了保存和检索编辑器的内容，这里local storage使用。但是对于数据库的情况，基本原理是一样的。

在这个演示中，您可以看到简单的编辑器组件，当您单击 时SAVE RAW CONTENT TO LOCAL STORAGE，我们将当前编辑器内容作为字符串保存到本地存储。我们使用convertToRawand JSON.stringify：

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

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

如果之后您重新加载页面，您的编辑器将使用您保存的内容和样式进行初始化。由于在constructor我们读取了适当的本地存储属性，并且 with 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
  };
}
于 2017-10-25T12:32:23.160 回答
3

编辑：这不是一个好方法。请参阅已接受的答案。

坚持

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

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

重新创建ContentState

const jsObject = JSON.parse(jsonString);
const contentState = new ContentState(jsObject);
于 2016-04-08T13:19:05.653 回答
0

如果您要使用 AWS Lambda 将原始内容保存到您的数据库，我建议您在 Lambda 代码中进行字符串化，这样您就可以转义单引号；然后存储它：

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

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

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

使用数据客户端时，您需要做的就是在从原始数据转换时再次解析它：

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

编辑

再想一想，我想您也可以字符串化，并在客户端转义内容

于 2020-11-26T16:10:22.587 回答