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

问题描述

我使用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将内容转换为所需文本感到困惑。

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

预先感谢

解决方法

您必须了解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获取内容并显示它。

从编辑器格式转换为JSON

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

将JSON发布到您的API

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

从您的API获取JSON

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

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

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

draftjs reactjs reactjs reactjs reactjs