基于 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 用于编辑修改后 将当前编辑框中的内容 转换成 字符串 ， 传入父组件 以供与后台接口使用 　　 　　整个组件大致如此， 基本上满足了日常需要， 如果哪里不清楚 请在下方留言 或直接查阅官方文档😀😀