想直接看实现的请跳过前三节.....
需求描述
因为业务需求，需要用到比较多的富文本编辑器，至于为什么会在一个页面里有很多的富文本，憋问我，问就是甲方爸爸给钱了！在富文本中，需要满足能够随意的修改图片的大小，能够直接复制图片进入，能够满足基本的排版需求，按理来说基本上网上的编辑器都能满足要求。
出现的问题
然后我问了公司的其他同事，有什么比较好的推荐，说了几个，最后我还是选择了最简单的 wangEditor (当时我觉得它最简单，因为不需要怎么配置，网站也有现成的 demo ),一开始是很顺畅的，能够灵活的设置菜单和基本响应，处理机制等，然而当我在一个页面中使用两个富文本时，出bug了，具体描述单击链接跳转看。简单的说就是两个富文本不能同时接受拖拽进来的图片。
解决办法
至于解决办法，当然是先去 github 报个异常,然后换一个编辑器看看，客户在等着，也没时间研究。随后我尝试了antd社区精选组件，里面有两个react-quill 和 braft-editor，分别编写了 demo ，发现后者更满足我的项目需求。
代码
现在开始进入正题，我先对braft-editor进行了简答封装，因为它自带的上传是会将图片转成 base64 格式的,与我的需求不符，并且如果直接传 base64 的字符串,数据太大，很容易引起接口传输过慢，中断的问题。封装代码如下：
Editor文件
/**
* @desc 新的antd富文本编辑器
* @name Editor
* @author Cyearn
* @date 2020/12/11
*/
import React, { Component } from 'react'
import BraftEditor from 'braft-editor' // 引入库
import 'braft-editor/dist/index.css' // 引入样式
import { apiPostUpload } from '@/api/load' // 引入自己的上传接口
import { isDev } from '@/utils' // 判定是否为开发模式的函数
import { message } from 'antd'
// 本地调试时的服务地址
const HOST = process.env.REACT_APP_DEFAULT_PROXY
class Editor extends Component {
constructor(props) {
super(props)
this.state = {
propValue: '', // 一个用来判定是否需要初始化编辑器的变量
editorState: BraftEditor.createEditorState(null), // 设置编辑器初始内容
outputHTML: null, // 富文本的内容
}
this.editorRef = React.createRef() // 因为用到了自定义的上传，所以对编辑器加了一个ref
}
componentDidMount() {}
// 用来判定是否需要初始化编辑器
componentDidUpdate() {
if (this.props.value && this.props.value !== this.state.propValue) {
if (this.state.propValue === '') {
// 上层传入的是字符串结构的数据，所以需要使用BraftEditor.createEditorState来包裹它
this.setState({ editorState: BraftEditor.createEditorState(this.props.value), propValue: this.props.value })
}
}
}
// 编辑器发生变化
handleChange = async editorState => {
await this.setState({
editorState: editorState,
outputHTML: editorState.toHTML(),
})
this.props.onChange(editorState.toHTML()) // 当编辑器内容发生变化的时候向上抛出更改的结果
}
// 编辑器失去焦点
onBlurEditor = () => {
const { outputHTML } = this.state
// this.props.onChange(outputHTML)
}
// 上传函数
uploadImage = async param => {
try {
let agr = {
file: param.file,
isOpenFile: true,
}
const res = await apiPostUpload(agr) // 自己的上传接口
let data = res.datas
param.progress(100) // 显示完成上传的进度条
param.success({
url: isDev ? HOST + data.url : data.url,
meta: {
alt: data.name,
// loop: true, // 指定音视频是否循环播放
// autoPlay: true, // 指定音视频是否自动播放
// controls: true, // 指定音视频是否显示控制栏
},
})
const { getValue } = this.editorRef // 通过ref获取到当前的编辑器内的数据
this.handleChange(getValue()) // 调用数据更新的函数，很重要，不做这个会出现保存结果和显示结果不匹配的情况
} catch (error) {
let msg = error + '，上传失败'
message.error(msg)
}
}
// 查看图片发生变化的函数
changeImage = async file => {
console.log(file)
}
render() {
const { editorState } = this.state
const { width = '100%', id = 'braft_editor', height = 600 } = this.props // 定义一些默认的格式
// 这是配置自己菜单的部分，删除就是显示全菜单
const controls = [
{
key: 'bold',
text: 加粗,
},
'italic',
'underline',
'separator',
'link',
'separator',
'media',
]
return (
(this.editorRef = e)} // 回调refs，用来绑定ref
value={editorState}
onChange={this.handleChange}
controls={controls} // 用来配置自己的菜单
contentStyle={{ height: 300, boxShadow: 'inset 0 1px 3px rgba(0,0,0,.1)' }} // 用来设置一些样式
media={{ uploadFn: this.uploadImage, pasteImage: true, onChange: this.changeImage }} // 用来定义自己的上传函数
/>
)
}
}
export default EditorForm 表单所在文件
// 构造函数
constructor(props) {
super(props)
this.state = { content: ''}
this.formRef = React.createRef()
}
// 当form发生变化
onFormChange = e => {
console.log(e)
Boolean(e['content']) &&
this.setState({
content: e['content'],
})
}
//...render内部的代码