改造百度ueditor
背景
富文本编辑是管理后台（cms）系统中的重要功能，编辑器的选择也非常多，如今大多编辑器都是走的简约路线，遇上挑剔的客户就无法满足他们的需求。百度的ueditor作为一款重量级的编辑器，提供了强大的功能，并且从word中直接copy到编辑器中的还原效果也非常好，但是由于官方已经很久没有维护了，所以对接已有的系统灵活度不够。
基于vue封装的ueditor组件挺多的，并且封装和改造的效果都还不错，比如vue-ueditor-wrap，在封装react-ueditor-component过程中也借鉴了开源社区中的优秀代码。
功能需求
ueditor其他功能没什么需要改动的，但是上传文件的功能与后端耦合太高，不符合现在的前后端分离的系统设计，也不好对接第三方存储（如七牛OSS），所以要改造实现基本的两个功能：
- 后端配置前移，上传文件的配置参数直接写在前端，不需要请求一次后端接口才能初始化上传文件的功能
- 自定义上传文件的请求头和请求，虽然官方提供了解决方案，但是不够灵活
另一块就是基础的编辑功能，封装后的组件应该像input使用一样简单，value控制编辑器内容，onChange监听编辑器内容变化事件
下面解析一些核心功能的实现思路
初始化编辑器
ueditor的初始化是异步的，所以需要在编辑器准备就绪后才能进行后续的操作，这里使用Promise进行流程控制
componentDidMount () {
// 编辑器ready后再进行后续操作
this.setState(state => ({
editorReady: new Promise((resolve, reject) => {
let ueditor = window.UE.getEditor(this.editorId, {
...this.ueditorOptions, // 一些默认参数
...this.props.ueditorOptions // props传入的参数
});
ueditor.ready(() => {
resolve(ueditor);
this.observerChangeListener(ueditor); // 初始化监听编辑器变化的方法，后面会具体说明
ueditor.setContent(this.props.value || '');
});
})
}));
}
value
value改变触发react-ueditor-component中的编辑器的变化是个很简单的父组件向子组件传参，
使用static getDerivedStateFromProps就可以实现
static getDerivedStateFromProps (nextProps, prevState) {
let editorReady = prevState.editorReady;
let value = nextProps.value;
if (Object.prototype.hasOwnProperty.call(nextProps, 'value')) {
editorReady && editorReady.then((ueditor) => {
(value === prevState.content || value === ueditor.getContent()) || ueditor.setContent(value || '');
});
}
return {
...prevState,
content: value
};
}
上面的代码比想象中复杂一点，在组件内的state中会创建一个属性content用于存储上次传过来的value，props.value会和content和编辑器中实际的内容比较
因为在一些特殊情况下，编辑器中的内容会发生变化，而同时getDerivedStateFromProps会被触发但是value并没有发生变化，如果不进行比较编辑器中的内容会被回退为旧值。
onChange
编辑器内容变化可以使用ueditor提供的contentChange，但是会有bug，比如按下多个按键时并不会触发该事件
react-ueditor-component采用MutationObserver监听DOM变化
observerChangeListener (ueditor) {
const changeHandle = () => {
let onChange = this.props.onChange;
if (ueditor.document.getElementById('baidu_pastebin')) {
return;
}
onChange && onChange(ueditor.getContent());
};
this.observer = new MutationObserver(changeHandle); // FIXME: 这里可以使用debounce节流
this.observer.observe(ueditor.body, {
attributes: true, // 是否监听 DOM 元素的属性变化
attributeFilter: ['src', 'style', 'type', 'name'], // 只有在该数组中的属性值的变化才会监听
characterData: true, // 是否监听文本节点
childList: true, // 是否监听子节点
subtree: true // 是否监听后代元素
});
}
后端配置前移
此功能的实现需要修改ueditor源码了，笔者从fex-team/ueditorfork了一份，基于dev-1.4.3.3分支创建了dev-3.0.0分支，github，所有代码的修改都用MARK:标记出来了，可以全局搜索查看所有源码改动
只需要找到获取配置的方法并修改就可以了，在_src/core中
UE.Editor.prototype.loadServerConfig = function(){
this._serverConfigLoaded = false;
try {
utils.extend(this.options, this.options.serverOptions);
utils.extend(this.options, this.options.serverExtra);
this.fireEvent('serverConfigLoaded');
this._serverConfigLoaded = true;
} catch (e) {
console.error(this.getLang('loadconfigFormatError'));
}
}
相应的，封装的react-ueditor-component增加了字段配置
window.UE.getEditor(this.editorId, {
serverUrl: this.props.ueditorOptions.serverUrl,
serverOptions: {
imageActionName: 'uploadimage',
imageFieldName: 'file',
...others
},
serverExtra: this.props.ueditorOptions.serverUrl
});
beforeUpload钩子
beforeUpload钩子是自定义请求数据实现的关键，但实现的功能又不止于增加自定义请求数据
beforeUpload方法由参数传入ueditor
上传前需要进行的操作很多情况下可能是一个异步过程，这里使用Promise进行流程控制，以autoupload.js为例
if (me.options.beforeUpload) {
Promise.resolve(me.options.beforeUpload(file)).then(function (file) {
if (!file) {
return
}
// 设置请求头和请求内容，开始上传
})
} else {
// 设置请求头和请求内容，开始上传
}
自定义请求数据
自定义请求数据用serverExtra实现，需要这部分内容是随时可变的，所以需要新增一个方法，可以随时设置serverExtra
UE.Editor.prototype.setExtraData = function (options) {
try {
utils.extend(this.options, options);
} catch (e) {
console.error(this.getLang('setExtraconfigFormatError'));
}
}
上面的代码不难看出来，实际上setExtraData方法可以设置任何配置，但是后续封装组件并使用时，我只建议用于修改serverExtra，因为修改ueditor的其他参数并不一定有效，并且可能会出现无法预期的bug。
在每次执行上传之前应该读取配置、设置上传内容，以autoupload.js为例
var fd = new FormData()
// 请求体中增加额外数据
if (me.options.extraData && Object.prototype.toString.apply(me.options.extraData) === "[object Object]") {
for (var key in me.options.extraData) {
fd.append(key, me.options.extraData[key]);
}
}
// 请求头中增加额外数据
if (me.options.headers && Object.prototype.toString.apply(me.options.headers) === "[object Object]") {
for (var key in me.options.headers) {
xhr.setRequestHeader(key, me.options.headers[key]);
}
}
封装在组件中，需要在static getDerivedStateFromProps中实现响应式更新
if (Object.prototype.hasOwnProperty.call(nextProps.ueditorOptions, 'serverExtra')) {
let serverExtraStr = JSON.stringify(nextProps.ueditorOptions.serverExtra);
if (serverExtraStr === prevState.serverExtraStr) {
return {
...prevState,
content: value
};
}
editorReady && editorReady.then((ueditor) => {
ueditor.setExtraData && ueditor.setExtraData(nextProps.ueditorOptions.serverExtra);
});
return {
...prevState,
serverExtraStr,
content: value
};
}
以上便是ueditor改造和封装中最核心的内容，下面简单介绍一下应该如何使用react-ueditor-component，详细的使用教程请看readme.md，项目源码中也提供了完整的demo，App.js(不使用react-ueditor-component)、OwnServer.js(使用react-ueditor-component上传到自己的服务器)、QiniuServer.js(使用react-ueditor-component对接七牛OSS)。
安装和引入
安装组件
yarn add react-ueditor-component --save
下载修改后打包的ueditor.zip，或者找到node_modules/react-ueditor-component/assets/utf8-php.zip，解压文件，放在网站的根目录，react项目一般放在public文件夹下，
index.html中script标签引入ueditor代码
<script src="/utf8-php/ueditor.config.js"></script>
<script src="/utf8-php/ueditor.all.js"></script>
如果你只需要编辑功能
import ReactUEditorComponent from 'react-ueditor-component';
export default class App extends React.Component {
state = {
value: ''
}
onChange = (value) => this.setState(value);
render () {
<div>
<ReactUEditorComponent
value={this.state.value}
onChange={this.onChange}
/>
{/* 配合antd的form */}
{
this.props.form.getFieldDecorator('content')(
<ReactUEditorComponent />
)
}
</div>
}
}
如何使用beforeUpload钩子
通常对接第三方OSS需要获取上传凭证，这就需要用到beforeUpload钩子
export default class App extends React.Component {
state = {
value: '',
serverExtra: {
// 上传文件额外的数据
extraData: {}
}
}
beforeUpload = file => new Promise((resolve, reject) => {
let key = 't' + Math.random().toString().slice(5, 16);
// 请求服务器，获取七牛上传凭证
fetch('getuploadtoken.com', {
headers
})
.then(response => response.json())
.then((data) => {
// 设置七牛直传额外数据
this.setState({
serverExtra: {
extraData: {
token: data.token,
key
}
},
// 设置额外数据完成会触发`setExtraDataComplete`
setExtraDataComplete: () => {
resolve(file);
}
});
});
})
onChange = (value) => this.setState(value);
render () {
return (
<ReactUEditorComponent
value={this.state.value}
onChange={this.onChange}
// 必须在state中
setExtraDataComplete={this.state.setExtraDataComplete}
ueditorOptions={{
beforeUpload: this.beforeUpload,
// 上传文件时的额外信息
serverExtra: this.state.serverExtra,
serverUrl: 'http://qiniuupload.com' // 上传文件的接口
}}
/>
)
}
}
希望以上轮子有朝一日对你有所帮助，欢迎提供技术支持，或者加入我们 yemao@talkmoney.cn
作者简介：叶茂，芦苇科技web前端开发工程师，代表作品：口红挑战网红小游戏、服务端渲染官网、微信小程序粒子系统。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发，专注于前端领域框架、交互设计、图像绘制、数据分析等研究。 一起并肩作战： yemao@talkmoney.cn 访问 www.talkmoney.cn 了解更多