как отображать местный контент реакции-draft-wysiwyg - PullRequest
Новая
       22

как отображать местный контент реакции-draft-wysiwyg

0 голосов
/ 22 апреля 2019

как отобразить отредактированный контент со всеми стилями? 

const content = {
  entityMap: {},
  blocks: [
    {
      key: "637gr",
      text: "Initialized from content state.",
      type: "unstyled",
      depth: 0,
      inlineStyleRanges: [],
      entityRanges: [],
      data: {},
    },
  ],
}

export default class EditorConvertToJSON extends Component {
  constructor(props) {
    super(props)
    const contentState = convertFromRaw(content)
    this.state = {
      contentState,
    }
  }

  onContentStateChange = (contentState) => {
     this.setState({
     contentState,
    })
  }

  render() {
    const { contentState } = this.state
    console.log("==============")
    console.log("contentState", contentState)

return (
  <div>
    <Editor
      wrapperClassName="demo-wrapper"
      editorClassName="demo-editor"
      onContentStateChange={this.onContentStateChange}
      // editorState={this.state.contentState}
    />

    <Editor editorState={contentState} readOnly />
  </div>
)

} }

Я получаю сообщение об ошибке TypeError: editorState.getImmutable не является функцией где я не прав? может понадобиться отобразить эти данные в div и других тегах html? Я полностью запутался

1 Ответ

1 голос
/ 01 июля 2019

Надеюсь, это поможет вам: 

const content = {
  entityMap: {},
  blocks: [
    {
      key: "637gr",
      text: "Initialized from content state.",
      type: "unstyled",
      depth: 0,
      inlineStyleRanges: [],
      entityRanges: [],
      data: {},
    },
  ],
}

export default class EditorExample extends Component {
  constructor(props) {
    super(props)
    this.state = {
      contentState : null
    }
  }

  onContentStateChange = contentState => {
   console.log('as HTML:', draftToHtml(contentState));
   this.setState({ contentState});
  }

  render() {
   const { contentState } = this.state
   return (
    <Editor
     initialContentState={content}
     editorContent={contentState}
     onContentStateChange={this.onContentStateChange}
     wrapperClassName="demo-wrapper"
     editorClassName="demo-editor"
     />
  )
 }
}
...