javascript - 使用BraftEditor，value属性设置初始值富文本框没有回显？

Question

使用BraftEditor，value属性设置初始值富文本框没有回显？

const [editorState, setEditorState] =   useState(BraftEditor.createEditorState('<p>测试123</p>'))<BraftEditor    value={editorState}    style={{border: '1px solid #eee'}}    onChange={(e) => handleEditorChange(e)}/>

怎样让BraftEditor回显初始化的文本<p>测试123</p>？

Answer 1

BraftEditor 是一个基于draft-js的富文本编辑器。当你使用 BraftEditor.createEditorState 创建初始编辑状态时，你需要在 value 属性中显示这个状态。

你的代码示例中，你正确地设置了初始编辑状态，但是在 value 属性中没有正确地引用它。你需要使用 editorState.value 来引用编辑器的当前值。

下面是修改后的代码示例：

import BraftEditor from 'braft-editor';const [editorState, setEditorState] = useState(BraftEditor.createEditorState('<p>测试123</p>'));function handleEditorChange(e) {  setEditorState(e.target.value);}<BraftEditor  value={editorState.value}  style={{border: '1px solid #eee'}}  onChange={handleEditorChange}/>

这样，当你初始化编辑器时，<p>测试123</p> 就会作为初始文本显示在编辑器中。同时，任何在编辑器中的更改都会通过 onChange 事件处理器返回，你可以根据需要处理这些更改。