我正在使用Slate JS编辑器构建textarea电子邮件表单。我不想显示默认的初始状态值,而是显示自己的值,该值作为来自redux的prop传递给组件。
所以代替这个:
<Editor
spellCheck
autoFocus
placeholder="Enter your text..."
ref={this.ref}
**value = {this.state.value}**
onPaste={this.onPaste}
onChange={this.onChange}
renderNode={this.renderNode}
renderMark={this.renderMark}
/>
我正在这样做:
<Editor
spellCheck
autoFocus
placeholder="Enter your text..."
ref={this.ref}
**value = {Value.fromJSON(JSON.stringify(this.props.richText))}**
onPaste={this.onPaste}
onChange={this.onChange}
renderNode={this.renderNode}
renderMark={this.renderMark}
/>
因此,该prop作为对象传递,首先转换为json,然后转换为所需的slate编辑器格式。这不会破坏组件,但是值不会显示在编辑器中。我在做什么错,将slate编辑器值设置为prop的正确方法是什么?感谢您对此的任何帮助!
最佳答案
Slate中的value
不仅仅是文本字段的值,而且基本上存储了有关Slate编辑器的所有数据。
要从道具传递数据,您需要反序列化this.props.richText
并将其存储在状态中,然后每次value
更改时更新状态的Editor
。如果您需要纯文本编辑器,请按照以下步骤进行操作。
import { Editor } from 'slate-react'
import Plain from 'slate-plain-serializer'
class App extends React.Component {
state = {
value: Plain.deserialize(this.props.richText),
}
onChange = ({ value }) => {
this.setState({ value })
}
render() {
return <Editor value={this.state.value} onChange={this.onChange} />
}
}
如果您想使用富文本或html编辑器,则反序列化会涉及更多一些,但是如果遵循以下指南,则非常简单:
Saving and Loading HTML Content
富文本example和
code