我正在尝试将draft-js
's持久化EditorContent
到数据库,然后再次读取并重新创建 EditorContent 对象。但EditorContent.getPlainText()
剥离了富文本内容。我不知道还能怎么做。
我该如何正确坚持EditorContent
?
我正在尝试将draft-js
's持久化EditorContent
到数据库,然后再次读取并重新创建 EditorContent 对象。但EditorContent.getPlainText()
剥离了富文本内容。我不知道还能怎么做。
我该如何正确坚持EditorContent
?
该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 导入内容,但)
我发现在读取和保存到数据库时我必须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) );
这里有很多有用的答案,所以我想添加这个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));
}
如果之后您重新加载页面,您的编辑器将使用您保存的内容和样式进行初始化。因为 inconstructor
我们读取了适当的本地存储属性,并且 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
};
}
编辑:这不是一个好方法。请参阅接受的答案。
坚持
const contentStateJsObject = ContentState.toJS();
const contentStateJsonString = JSON.stringify(contentStateJS);
现在内容状态可以保存为 JSON 字符串。
重新创建 ContentState
const jsObject = JSON.parse(jsonString);
const contentState = new ContentState(jsObject);