在 React Hooks 项目中应用所见即所得草案答案

【问题标题】：Applying Draft Wysiwyg in React Hooks Project在 React Hooks 项目中应用所见即所得草案
【发布时间】：2019-11-28 11:21:03
【问题描述】：

我尝试将react draft wysiwyg 集成到我的 React Hooks 项目中。

我这样初始化描述：

var editorState = EditorState.createEmpty()
const [description, setDescription] = React.useState(editorState);

...我以这种方式应用编辑器：

<Editor
    editorState={description}
    toolbarClassName="toolbarClassName"
    wrapperClassName="wrapperClassName"
    editorClassName="editorClassName"
    onEditorStateChange={setEditorState}
/>

这是 setEditorState：

const setEditorState = (editorState) => {
  console.log('editorState', editorState)
  setDescription(editorState)
}

当我在编辑器上输入时，description 不是我输入的，而是一个像这样的对象：

_immutable: {allowUndo: true,…}

更新 1 我还发现当前内容就是我输入的内容。访问这样的数据是否正确？

_immutable.currentContent.text

更新 2 我也尝试像这样直接设置编辑器状态，但没有帮助：

onEditorStateChange={setDescription}

我错过了什么？谢谢

【问题讨论】：

标签： reactjs react-hooks draftjs

【解决方案1】：

好的，我通过转换为/从 html 解决了这个问题。

这足以将编辑器状态转换为 html。

import {stateToHTML} from 'draft-js-export-html';
....

let html = stateToHTML(editorState.getCurrentContent());

当我将 html 转换回编辑器状态时，我像 documentation 一样应用。

const html = props.content;
const contentBlock = htmlToDraft(html);
if (contentBlock) {
  const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
  editorStateInitial = EditorState.createWithContent(contentState);
}

const [editorState, setEditorState] = React.useState(editorStateInitial);

这个转换圈解决了问题。

【讨论】：