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 相关文章推荐
使用javascript实现ListBox左右全选,单选,多选,全请
Nov 07 Javascript
判断在css加载完毕后执行后续代码示例
Sep 03 Javascript
javascript中checkbox使用方法简单实例演示
Nov 17 Javascript
Javascript OOP之面向对象
Jul 31 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
Mar 25 Javascript
jQuery实现一个简单的验证码功能
Jun 26 jQuery
微信公众号平台接口开发 获取access_token过程解析
Aug 14 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 Javascript
Vue+webpack实现懒加载过程解析
Feb 17 Javascript
JavaScript 判断浏览器是否是IE
Feb 19 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 字符串正则替换函数preg_replace使用说明
2011/07/15 PHP
简单的php缓存类分享     php缓存机制
2014/01/22 PHP
php压缩和解压缩字符串的方法
2015/03/14 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
yii2高级应用之自定义组件实现全局使用图片上传功能的方法
2016/10/08 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
Jquery为a标签的href赋值实现代码
2013/05/03 Javascript
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
一步步教大家编写酷炫的导航栏js+css实现
2016/03/14 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
Vue.js项目部署到服务器的详细步骤
2017/07/17 Javascript
使用vue制作滑动标签
2019/09/21 Javascript
vue实现表格合并功能
2020/12/01 Vue.js
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python中针对函数处理的特殊方法
2014/03/06 Python
Python Matplotlib库入门指南
2015/05/18 Python
Python并发编程协程(Coroutine)之Gevent详解
2017/12/27 Python
浅析Python四种数据类型
2018/09/26 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
Win10+GPU版Pytorch1.1安装的安装步骤
2019/09/27 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
最新的小工具和卓越的产品设计:Oh That Tech!
2019/08/07 全球购物
关于元旦的广播稿
2014/02/16 职场文书
运动会稿件100字
2014/02/21 职场文书
业务员自荐信范文
2014/04/20 职场文书
大型活动组织方案
2014/05/10 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
一年级班主任工作总结2014
2014/11/08 职场文书
2015年社区民政工作总结
2015/04/21 职场文书
道歉信范文
2015/05/12 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
深度学习详解之初试机器学习
2021/04/14 Python
Java中的继承、多态以及封装
2022/04/11 Java/Android