React中使用UMEditor的方法示例


Posted in Javascript onDecember 27, 2019

最近项目中需要使用富文本编辑器,参考了运营小姐姐日常使用平台上的编辑器,最后考虑采用百度的UMEditor。因为轻量,功能和配置简单,没有很多定制化的功能,所以没采用UEditor。不过我后续会出一篇文章将UEditor的二次开发。

umeditor的引入

组件设计

首先看一下组件大致的内容:

1.组件props:

React中使用UMEditor的方法示例

2.组件关键的成员属性:

React中使用UMEditor的方法示例

3.简单的render:

React中使用UMEditor的方法示例

4.UMEditor的实例化

React中使用UMEditor的方法示例

UMEditor源码里需要改动的主要就是图片的请求了,配置中的imgUrl我传的是一个方法,这个方法中请求后台并返回Promise<{url:string}>

源码修改

源码修改两个文件

image.js中两处更改

React中使用UMEditor的方法示例

React中使用UMEditor的方法示例

autoupload.js中一处修改

React中使用UMEditor的方法示例

UMEditor的源码存放在dll目录下,打包时会被webpack拷贝道相应的目录下,UMEDITOR_HOME_URL和这个目录路径保持一致

React中使用UMEditor的方法示例

umeditor的依赖处理

文件合并

由于依赖文件过多,我们使用gulp合并一下

React中使用UMEditor的方法示例

core文件夹下的依赖合并为core.min.js,其他plugin,ui,addapter也一样合并为相应的min.js

原本由editor_api.js引入依赖的,现在我们自己写个方法引入。

依赖加载

组件中定义需要引入的文件,这是一个二维数组,同级的文件按顺序引入,不同级别的可以并发请求,比如:['/third-party/jquery.min.js', '/third-party/template.min.js']中的两个文件同时请求,但是保证它们都load完再请求后面的文件

React中使用UMEditor的方法示例

加载的时候使用SyncRequire方法

React中使用UMEditor的方法示例

使用一步迭代器实现可控加载

React中使用UMEditor的方法示例

loadDep负责文件加载,具体如下:

React中使用UMEditor的方法示例

SyncRequire内部维护一个异步迭代器,迭代的对象是每一个文件的加载。最后使用for await进行异步迭代

React中使用UMEditor的方法示例

如果是一个文件路径数组,则说明这个数组中的文件可以同时使用loadDep加载,如果是一个文件路径字符串,则说明这个文件加载完才可以加载后面的文件。loaders具体实现如下

React中使用UMEditor的方法示例

好了,有了这个SyncRequire方法,就可以既同时又顺序加载我们的外部js或者css文件了,最后可以在控制台中验证效果

React中使用UMEditor的方法示例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE和Firefox下javascript的兼容写法小结
Dec 10 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
Dec 16 Javascript
node.js中的path.basename方法使用说明
Dec 09 Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 Javascript
Bootstrap table使用方法详细介绍
Dec 09 Javascript
JavaScript实现简单的四则运算计算器完整实例
Apr 28 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
Sep 18 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
Nov 19 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
详解vue-cli+element-ui树形表格(多级表格折腾小计)
Apr 17 Javascript
微信小程序实现的picker多级联动功能示例
May 23 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
Nov 06 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 #Javascript
JavaScript中变量提升机制示例详解
Dec 27 #Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
Dec 26 #Javascript
Vue使用虚拟dom进行渲染view的方法
Dec 26 #Javascript
node.js Promise对象的使用方法实例分析
Dec 26 #Javascript
js回调函数仿360开机
Dec 26 #Javascript
js仿360开机效果
Dec 26 #Javascript
You might like
PHP用mysql数据库存储session的代码
2010/03/05 PHP
PHP信号量基本用法实例详解
2016/02/12 PHP
thinkphp5框架前后端分离项目实现分页功能的方法分析
2019/10/08 PHP
Javascript模板技术
2007/04/27 Javascript
JS 页面自动加载函数(兼容多浏览器)
2009/05/18 Javascript
JavaScript 直接操作本地文件的实现代码
2009/12/01 Javascript
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
Bootstrap每天必学之按钮
2015/11/26 Javascript
谈谈jQuery之Deferred源码剖析
2016/12/19 Javascript
gulp解决跨域的配置文件问题
2017/06/08 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
深入理解Vue2.x的虚拟DOM diff原理
2017/09/27 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
2018/04/03 Javascript
vue非父子组件通信问题及解决方法
2018/06/11 Javascript
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
js html实现计算器功能
2018/11/13 Javascript
vue+openlayers绘制省市边界线
2020/12/24 Vue.js
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
跟老齐学Python之编写类之一创建实例
2014/10/11 Python
Python队列的定义与使用方法示例
2017/06/24 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
Python自动化导出zabbix数据并发邮件脚本
2019/08/16 Python
Python进程间通信multiprocess代码实例
2020/03/18 Python
Book Depository美国:全球领先的专业网上书店之一
2019/08/14 全球购物
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
假日旅行社实习自我鉴定
2013/09/24 职场文书
面料业务员岗位职责
2013/12/26 职场文书
商务专员岗位职责范本
2014/06/29 职场文书
2015年简历自我评价范文
2015/03/11 职场文书
幼儿园安全教育月活动总结
2015/05/08 职场文书
tensorflow中的数据类型dtype用法说明
2021/05/26 Python
Linux系统下安装PHP7.3版本
2021/06/26 PHP
python机器学习实现oneR算法(以鸢尾data为例)
2022/03/03 Python