基于 React-draft-wysiwyg 实现的 react 富文本编辑器组件 开箱即用

工作中遇到了一个需要做图文详情 的富文本编辑的需求，

于是基于 React-draft-wysiwyg 实现了一个 纯组件，

目前支持 常规文本输入 外部链接图片 以及本地上传图片，

由于是纯组件， 可直接放在react 项目中引入使用

具体项目中使用十分方便， 一行代码搞定,

<EditorVan editorState={this.state.editorState} transformHTML={(editorState) => this.setState({ editorState })} />

　　上面代码中的 props.editorState 为对当前富文本编辑组件传入的值, 类型为字符串， 传入后 EditorVan 会自行对字符串进行解析，最终显示为 html 格式， 

　　props.transformHTML 是一个方法， 用户在进行富文本编辑时， 实时对父组件 进行更新， 返回的html格式字符， 可以直接传至后台， 不需要在父组件中额外处理, 如果需要在这个方法中执行其他操作， 例如进行form 表单校验等操作， 可以写在 setState回调函数中， 或者用一个父组件方法代替

 

　

以下是组件全部代码

使用前， 请确保各个包都有安装好：

 

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

//  这里的 UploadBase64 是我的图片上传接口
import { UploadBase64 } from '@/services/common_services';
// 这里的 IMG_URL 图片的 Host， 因为上面的接口上传成功返回的是一个相对路径 页面展示时需要自行拼接 Host。 这两处， 大家可根据实际情况自行修改
import { IMG_URL } from '@/utils';

const transformDraftStateToHtml = (editorState) => {
  if (!editorState.getCurrentContent) {
    return '';
  }
  return draftToHtml(convertToRaw(editorState.getCurrentContent()));
};

const transformHtmlToDraftState = (html = '') => {
  const blocksFromHtml = htmlToDraft(html);
  const { contentBlocks, entityMap } = blocksFromHtml;
  const contentState = ContentState.createFromBlockArray(contentBlocks, entityMap);
  return EditorState.createWithContent(contentState);
}

class EditorVan extends Component {

  state = {
    editorState: ''
  }

  onEditorStateChange = (editorState) => {
    this.setState({
      editorState
    })
    this.props.transformHTML( transformDraftStateToHtml(editorState) )
  };

  componentDidMount() {
    this.setState({
      editorState: transformHtmlToDraftState(this.props.editorState)
    })
  };

  uploadImageCallBack = (file) => {
    return new Promise((resolve, reject) => {
      (async() => {
        const base64 = await getBase64(file);
        const data = {
            base64: base64.split(',')[1],
            fileName: file.name,
            fileCode: 'material',
        }
        const res = await UploadBase64(data);
        if(res && res.data) {
          resolve({
            data: {
              link: `${IMG_URL}${res.data}`,
            },
          });
        } else {
          reject();
        }
      })();
    })
  }

  render() {
    return (
      <Editor
        editorState={this.state.editorState}
        onEditorStateChange={this.onEditorStateChange} 
        toolbar={{
          image: {
            uploadCallback: this.uploadImageCallBack,
            alt: { present: true, previewImage: true },
            previewImage: true,
          },
        }}
      />
    )
  }
};

export default EditorVan;

function getBase64(img, callback) {
  return new Promise((res, rej) => {
      const reader = new FileReader();
      reader.addEventListener('load', () => res(reader.result));
      reader.readAsDataURL(img);
  })
}

　组件解析

　　React-draft-wysiwyg 中原生支持外部图片链接上传 ，使用中直接  粘贴一份图片的 url 即可

　　实际开发中， 需要上传本地图片 这里就需要 自己实现

　　该组件 import 中 UploadBase64 与 IMG_URL 正是用来处理本地图片上传、UploadBase64 为 图片上传接口 ，该接口 图片上传至后台后， 后台会返回一个 相对路径， 因为相对路径是没有办法在页面直接展示图片的， 于是这里我使用了 与后台 约定好的 host:  IMG_URL 对图片路径进行拼接展示，这两部分， 大家可以在实际项目中自行进行增删处理， 特此说明

　　

　　transformDraftStateToHtml 该方法是对传入的 字符串 解析成 html

　　

　　transformHtmlToDraftState 用于编辑修改后 将当前编辑框中的内容 转换成 字符串 ， 传入父组件 以供与后台接口使用

　　

　　整个组件大致如此， 基本上满足了日常需要， 如果哪里不清楚 请在下方留言 或直接查阅官方文档😀😀