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

Question

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

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

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

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，以便您可以将其保存在 DB 中，然后从 API 获取内容并显示它。

1. 从编辑器格式转换为 JSON

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

1. 将 JSON 发布到您的 API

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

1. 从您的 API 获取 JSON

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

4. 从 JSON 转换为编辑器格式并使用编辑器显示（如果您希望用户编辑内容，您可以删除只读）

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