Question

如何显示所有样式的编辑内容？

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不是函数我哪里错了？可能需要在divs和其他html标签中显示此数据？我完全困惑

Answer 1

希望这对您有所帮助

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

如何显示本地内容react-draft-wysiwyg

1 个答案: