react-draft-wysiwyg 富文本编译器（超全面实用--附带上传图片）

最近由于项目需要，需要用到富文本编译器，我也是找了好多样富文本，最终不是因为不满足需要，或者是使用复杂、麻烦就给舍弃了，因为我本身用的是ant+react 框架，最终我使用了react-draft-wysiwyg，今天给大家分享一下我的用这个组件的心路历程，哈哈！（附上上传图片相关~）

安装插件或依赖

安装的时间会很长，耐心等待就可以啦！

npm install react-draft-wysiwyg

npm install draft-js

npm install draftjs-to-html

npm install html-to-draftjs

或

yarn add react-draft-wysiwyg

yarn add draft-js

yarn add draftjs-to-html

yarn add html-to-draftjs

引入插件

import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import { EditorState, convertToRaw, ContentState } from 'draft-js';
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';

初始化

使用标签：

 <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 20 }} label="说明">
        {form.getFieldDecorator('description', {
          rules: [{ required: true, message: '请输入'}],
        })(<Editor
          editorState={editorState}
          toolbarClassName="toolbarClassName"
          wrapperClassName="wrapperClassName"
          editorClassName={styles.editor}
          onEditorStateChange={onEditorStateChange}
          style={{
            minHeight: '600px',
            minWith: '1000px',
          }}
        />)}
 </FormItem>
 注：因为我的富文本在子组件中，其中editorState和onEditorStateChange、uploadImageCallBack方法是通过props传过来的，例如：
  const {uploadImageCallBack,editorState,onEditorStateChange} = props;

初始化富文本值并将值存到state中

state = {
   editorState:EditorState.createEmpty(),
 };
 //onEditorStateChange方法是用于富文本发生改变时调用的，并将值存储到state中
  onEditorStateChange = editorState => {
   this.setState({
     editorState: editorState
   });
 };

此时此刻就能看见富文本的真实面目了，并能得到相应的值，如下：

得到的值如下：

使用（格式转换）

这样富文本到这里就算差不多了完成了，但是当我们打开得到的值得时候，如上图，并不是html，我们想给后台传数据的时候并不是我们想要的html格式的数据，这回我们就需要转一下，例如：

 const {editorState} = this.state;
 var descrCount=draftToHtml(convertToRaw(editorState.getCurrentContent()));

使用上面的方法我们最终输出的是我们最终想要的文本格式，如下图：

这样我们就搞定啦，但是又有一个问题：当我们从后台取出html格式的文本，赋值到富文本时，我们还是需要转换一下，具体方法如下：

    var descrip=(返回的字段);
    var str=htmlToDraft(descrip);
    if (str) {
      const contentState = ContentState.createFromBlockArray(str.contentBlocks);
      const editorState = EditorState.createWithContent(contentState);
       this.setState({
        editorState: editorState
      });

这样我们就轻松的将值赋好啦！如下图：

关于上传图片

接下来就到你们最关心的上传图片 相关喽！！！
上代码，嘿嘿！

 <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 20 }} label="说明">
        {form.getFieldDecorator('description', {
          rules: [{ required: true, message: '请输入'}],
        })(<Editor
          editorState={editorState}
          toolbarClassName="toolbarClassName"
          wrapperClassName="wrapperClassName"
          editorClassName={styles.editor}
          onEditorStateChange={onEditorStateChange}
          style={{
            minHeight: '600px',
            minWith: '1000px',
          }}
          toolbar={{
            image: {
              urlEnabled: true,
              uploadEnabled: true,
              alignmentEnabled: true,   // 是否显示排列按钮 相当于text-align
              uploadCallback: uploadImageCallBack,
              previewImage: true,
              inputAccept: 'image/*',
              alt: {present: false, mandatory: false,previewImage: true}
            },
          }}
        />)}
        </FormItem>

上面的代码主要是多出了toolbar的配置相关，主要就是配置上传图片相关的内容，这时我们会发现富文本上传图片处多了一个选图片的样式（File Upload），如下图：

这时我们配置一些东西就可以用了：这样我就直接上代码喽：

  uploadImageCallBack=(file)=>{
  return new Promise(
    (resolve, reject) => {
      let formData = new FormData()
      formData.append('file', file)
      let subsystemTourInfo = JSON.parse(localStorage.getItem('subsystemTourInfo')) || {}
      fetch(`你自己的接口地址`, {
        method: 'POST',
        headers: {
        'store-user-token':subsystemTourInfo.token
        },
        body: formData,
      }).then(res => {
        return res.json()
      }).then(res => {
        if (res.err !== 0) {
          message.error('图片上传失败', 2)
          reject(res)
        } else {
          resolve({data: {link: res.fileId}})
        }

      }).catch(err => {
        reject(err)
      })
    }
  )
}

大功告成，挺好用的，真的也不枉费我好几天找富文本的辛酸，最终好用了，很是开心，希望这篇文章能帮助大家，如果对你有帮助不要忘记点赞，关注我呦！！！