Slate JS: установите опору в качестве значения редактора - PullRequest
Новая
       12

Slate JS: установите опору в качестве значения редактора

0 голосов
/ 15 ноября 2018

Я создаю форму электронной почты textarea, используя редактор Slate JS.Вместо начального значения начального состояния по умолчанию, я хотел бы отобразить мое собственное значение, которое передается компоненту в качестве реквизита из редукса.

Итак, вместо этого: 

        <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}
    />

Так что пропеллер передается как объект, сначала преобразуется в json, а затем втребуется формат редактора сланца.Это не нарушает компонент, но значение не отображается в редакторе.Что я делаю не так и как правильно установить значение редактора сланца в качестве пропеллера?Спасибо за любую помощь с этим!

1 Ответ

0 голосов
/ 17 ноября 2018

value в Slate намного больше, чем просто значение текстового поля, и в основном хранит все данные о редакторе 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, десериализация будет немного более сложной, но довольно простой, если вы будете следовать этим инструкциям:

...