在React Hooks项目中应用Wysiwyg草案

Question

我尝试将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,…}

UPDATE 1我还发现当前内容是我输入的内容。这样访问数据是否合适？

_immutable.currentContent.text

UPDATE 2我也尝试像这样设置编辑器状态direct，但没有帮助：

onEditorStateChange={setDescription}

我想念的是什么？谢谢

Answer 1

[确定，我通过将HTML转换为HTML或从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);

此转换圈子解决了问题。

Answer 2

这很有意义，感谢您的发帖。您能否分享完整的代码，我遇到类似问题，但就我而言，我试图使用其他表单。你可以建议吗？

const [formData, setFormData] = useState({
  career: "",
  category: "",
  description: EditorState.createEmpty(),
  detail: EditorState.createEmpty()
});