如何显示本地内容 react-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 is not a function 我哪里错了？可能需要在 div 和其他 html 标签中显示此数据？我完全糊涂了

Answer 1

希望对您有所帮助：

做

npm i draftjs-to-html

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

这里是 official documentation react-draft-wyswiyg 的完整示例，如果您向下滚动到文档网页的底部，您可以找到示例 :)。这里需要用到draft-js的convertToRaw方法。在 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>
    );
  }
}

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

how to displayed local content react-draft-wysiwyg

reactjs

react-draft-wysiwyg