Slate JS:将prop设置为Editor的值

时间:2018-11-14 22:58:35

标签: javascript reactjs slatejs

我正在使用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的正确方法是什么?谢谢您的帮助!

1 个答案:

答案 0 :(得分:0)

Slate中的nextPageToken不仅仅是文本字段的值,而且基本上存储了有关Slate编辑器的所有数据。

要从道具传递数据,您需要反序列化value并将其存储在状态中,然后每次this.props.richText更改时更新状态value。如果需要纯文本编辑器,请按以下步骤进行操作。

Editor

如果您想使用富文本或html编辑器,则反序列化会涉及更多点,但是如果遵循以下指南,则非常简单: