想直接看实现的请跳过前三节.....
需求描述
因为业务需求,需要用到比较多的富文本编辑器,至于为什么会在一个页面里有很多的富文本,憋问我,问就是甲方爸爸给钱了!在富文本中,需要满足能够随意的修改图片的大小,能够直接复制图片进入,能够满足基本的排版需求,按理来说基本上网上的编辑器都能满足要求。
出现的问题
然后我问了公司的其他同事,有什么比较好的推荐,说了几个,最后我还是选择了最简单的 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 Editor
Form 表单所在文件
// 构造函数
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内部的代码
,form自带的校验不会判定为空
({ getFieldValue }) => ({
validator(rule, value) {
console.log(value)
if (value === '') {
return Promise.reject('请输入文章内容')
} else {
return Promise.resolve()
}
},
}),
]}
>
{/* 如果不在form中使用就要自己写受控变量和chang函数*/}