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

分手后的思念是犯贱 2023-07-01 10:58 95阅读 0赞

最近由于项目需要，需要用到富文本编译器，我也是找了好多样富文本，最终不是因为不满足需要，或者是使用复杂、麻烦就给舍弃了，因为我本身用的是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
       });
     };

此时此刻就能看见富文本的真实面目了，并能得到相应的值，如下：  
![在这里插入图片描述][20200121142024795.png]  
得到的值如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjc3NTExNQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjc3NTExNQ_size_16_color_FFFFFF_t_70 1]

### 使用（格式转换） ###

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

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

使用上面的方法我们最终输出的是我们最终想要的文本格式，如下图：  
![在这里插入图片描述][20200121142530271.png]  
这样我们就搞定啦，但是又有一个问题：当我们从后台取出html格式的文本，赋值到富文本时，我们还是需要转换一下，具体方法如下：

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

这样我们就轻松的将值赋好啦！如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjc3NTExNQ_size_16_color_FFFFFF_t_70 2]

### 关于上传图片 ###

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

<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），如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjc3NTExNQ_size_16_color_FFFFFF_t_70 3]  
这时我们配置一些东西就可以用了：这样我就直接上代码喽：

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

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

[20200121142024795.png]: https://img-blog.csdnimg.cn/20200121142024795.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjc3NTExNQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200121142052298.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjc3NTExNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjc3NTExNQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200121142312346.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjc3NTExNQ==,size_16,color_FFFFFF,t_70
[20200121142530271.png]: https://img-blog.csdnimg.cn/20200121142530271.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjc3NTExNQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200121143301175.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjc3NTExNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjc3NTExNQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200121144307874.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjc3NTExNQ==,size_16,color_FFFFFF,t_70