react 富文本编辑器 react-draft-wysiwyg 的使用总结

1.摘要

本博客主要总结 react 富文本编辑器 react-draft-wysiwyg 的使用，包括相关依赖、保存方式以及回显方式。

---

2.效果图

---

3.安装相关依赖

npm install react-draft-wysiwyg
npm install draft-js
npm install draftjs-to-html
npm install html-to-draftjs

---

4.引入相关组件函数

import '../../../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
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';

---

5.使用，相当于一个组件

<Editor
  editorState={this.state.editorState}
  wrapperClassName="demo-wrapper"
  editorClassName="demo-editor"
  onEditorStateChange={::this.onEditorStateChange}
/>
{/* css
.demo-editor {
   height: 380px !important;
   border: 1px solid #F1F1F1 !important;
   padding: 5px !important;
   border-radius: 2px !important;
}
*/}

---

6.以富文本的方式保存，即以HTML格式的方式保存发送到后台

formSubmit() {
  // 转换成HTML格式
  var editorContent = draftToHtml(convertToRaw(this.state.editorState.getCurrentContent()))
  this.props.saveSys({roomnotes: editorContent})
}

---

7.回显，即保存后下次回来重新查看之前所编辑的数据以及格式。

componentWillReceiveProps(nextProps) {
  if (this.props.getSysResult!==nextProps.getSysResult && nextProps.getSysResult.data) {
    // 匹配富文本编辑器格式，回显保存的内容
    const contentBlock = htmlToDraft(nextProps.getSysResult.data.roomnotes);
    if (contentBlock) {
      const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
      const editorState = EditorState.createWithContent(contentState);
      this.setState({ editorState })
    }
  }
}

---

8.相关

点击访问官方文档：https://jpuri.github.io/react-draft-wysiwyg/#/docs

完整的demo点击这里访问我的GitHub