如何从服务器在 React 中呈现 Draft-js 文本

Question

我使用 Draft-js 构建我的文本编辑器。

我想要做的是点击提交按钮，提交的文本应该出现在右侧（如您所见，空白的一面）

我正在调用 handleSubmit 函数 post 将内容发送到服务器：

handleSubmit = e => {

        e.preventDefault();

        const query = JSON.stringify(convertToRaw(this.state.editorState.getCurrentContent()));

        const payload = {
            query:query
        }

        axios({
            url:'http://localhost:9000/queries',
            method:'POST',
            data: payload
        })
        
    }

并检索内容：

getQueries(){
        axios.get("http://localhost:9000/queries")
        .then(response => {
            const data = response.data;
            this.setState({queries:data});
        })
    }

我有点困惑，关于如何使用 convertFromRaw 将内容转换为所需的文本。

我应该在哪里调用该方法？

提前致谢

Answer 1

您必须了解 DraftJS 是一个库，可以将编辑器中的任何内容转换成它自己的格式。

例如，apple转换为，

{
    "blocks": [{
        "key": "f6b3g",
        "text": "apple",
        "type": "unstyled",
        "depth": 0,
        "inlineStyleRanges": [{
            "offset": 0,
            "length": 5,
            "style": "ITALIC"
        }],
        "entityRanges": [],
        "data": {}
    }],
    "entityMap": {}
}

是的，就是这么大。因此，为了将它从这种格式转换回 apple，您需要一个知道如何解释它的组件。您不能只使用 div 标签。在这种情况下，它是编辑器组件本身！

因此您可以执行以下操作以只读模式显示内容。

<Editor readOnly={true}
  editorState={EditorState.createWithContent(this.state.editorState.getCurrentContent())}/>

现在，假设您要将编辑器内容发送到 API，以便您可以将其保存在数据库中，然后从 API 中获取内容并显示它。

从编辑器格式转换为 JSON

const requestBody = JSON.stringify(convertToRaw(this.state.editorState.getCurrentContent()))

Post JSON 到你的 API

fetch(url, {
  method: 'POST',
  body: requestBody
});

从您的 API

const response = await fetch(url, {
  method: 'GET'
});

从JSON转换为Editor格式并使用Editor显示（如果想让用户编辑内容可以去掉readonly）

<Editor readOnly={true}
  editorState={EditorState.createWithContent(convertFromRaw(JSON.parse(response))}/>

如何从服务器在 React 中呈现 Draft-js 文本

How to render Draft-js text in React from server

reactjs

draftjs