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

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 не является функцией, где я ошибаюсь? может понадобиться отобразить эти данные в div и других тегах 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"
     />
  )
 }
}

Answer 2

Вот полный пример из официальной документации по response-draft-wyswiyg, который вы можете найти, если прокрутите вниз до конца веб-страницы документации :). Здесь вам нужно использовать convertToRaw метод draft-js. С помощью draftjs-to-html, код будет похож на draftToHtml(convertToRaw(editorState.getCurrentContent()))

      import React, { Component } from 'react';
import { EditorState, convertToRaw, ContentState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';


class EditorConvertToHTML extends Component {
  constructor(props) {
    super(props);
    const html = '<p>Hey this <strong>editor</strong> rocks 😀</p>';
    const contentBlock = htmlToDraft(html);
    if (contentBlock) {
      const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
      const editorState = EditorState.createWithContent(contentState);
      this.state = {
        editorState,
      };
    }
  }

  onEditorStateChange: Function = (editorState) => {
    this.setState({
      editorState,
    });
  };

  render() {
    const { editorState } = this.state;
    return (
      <div>
        <Editor
          editorState={editorState}
          wrapperClassName="demo-wrapper"
          editorClassName="demo-editor"
          onEditorStateChange={this.onEditorStateChange}
        />
        <textarea
          disabled
          value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}
        />
      </div>
    );
  }
}