React中使用UMEditor的方法示例

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

umeditor的引入

组件设计

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

1.组件props：

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

3.简单的render:

4.UMEditor的实例化

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

源码修改

源码修改两个文件

image.js中两处更改

autoupload.js中一处修改

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

umeditor的依赖处理

文件合并

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

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

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

依赖加载

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

加载的时候使用SyncRequire方法

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

loadDep负责文件加载，具体如下：

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法

    我们接下来就来聊聊Yii2框架是如何整合百度编辑器umeditor的. umeditor是啥,我只听过ueditor,你这umeditor是不是盗版的东东喃?umeditor呢,说白了就是mini版的ueditor,按照百度官方说法,其实就是编辑器中的"短软小",但是功能俱全.咳咳,咱们回归正题. 首先勒,咱们先去官网下载一份mini版的ueditor umeditor,注意哦,是um editor. 下载下来解压放到项目根目录下面的 /css目录下 命名为umeditor,具体位置各

  • React中使用UMEditor的方法示例

    最近项目中需要使用富文本编辑器,参考了运营小姐姐日常使用平台上的编辑器,最后考虑采用百度的UMEditor.因为轻量,功能和配置简单,没有很多定制化的功能,所以没采用UEditor.不过我后续会出一篇文章将UEditor的二次开发. umeditor的引入 组件设计 首先看一下组件大致的内容: 1.组件props: 2.组件关键的成员属性: 3.简单的render: 4.UMEditor的实例化 UMEditor源码里需要改动的主要就是图片的请求了,配置中的imgUrl我传的是一个方法,这个方法

  • React中Ref 的使用方法详解

    本文实例讲述了React中Ref 的使用方法.分享给大家供大家参考,具体如下: React中Ref 的使用 React v16.6.3 在典型的React数据流中,props是父组件与其子组件交互的唯一方式.要修改子项,请使用new props 重新呈现它.但是,在某些情况下,需要在典型数据流之外强制修改子项.要修改的子项可以是React组件的实例,也可以是DOM元素.对于这两种情况,React都提供了api. 何时使用refs refs有一些很好的用例: 1.文本选择或媒体播放. 2.触发势在

  • Linux中在防火墙中开启80端口方法示例

    linux如果刚安装好防火墙时我们常用的端口是没有增加的,也就是说不能访问,那么要怎么把常用端口增加到防火墙通过状态呢,下面我们以80端口为例子吧. 最近自己在学习Linux.搭建一个LNMP环境.在测试时一切都好.然后重启Linux后.再次访问网站无法打开.最终原因是在防火墙中没有加入 80 端口的规则.具体方法如下: 在CentOS下配置iptables防火墙,是非常必要的.来我们学习如何配置!,其它版本一下: 1.打开iptables的配置文件: 代码如下 vi /etc/sysconfi

  • 在Python中使用gRPC的方法示例

    本文介绍了在Python中使用gRPC的方法示例,分享给大家,具体如下: 使用Protocol Buffers的跨平台RPC系统. 安装 使用 pip pip install grpcio pip install grpcio-tools googleapis-common-protos gRPC由两个部分构成,grpcio 和 gRPC 工具, 后者是编译 protocol buffer 以及提供生成代码的插件. 使用 编写protocol buffer 使用 gRPC 首先需要做的是设计 p

  • Go语言中的字符串处理方法示例详解

    1 概述 字符串,string,一串固定长度的字符连接起来的字符集合.Go语言的字符串是使用UTF-8编码的.UTF-8是Unicode的实现方式之一. Go语言原生支持字符串.使用双引号("")或反引号(``)定义. 双引号:"", 用于单行字符串. 反引号:``,用于定义多行字符串,内部会原样解析. 示例: // 单行 "心有猛虎,细嗅蔷薇" // 多行 ` 大风歌 大风起兮云飞扬. 威加海内兮归故乡. 安得猛士兮守四方! ` 字符串支持转义

  • 在Angular中使用JWT认证方法示例

    本文介绍了在Angular中使用JWT认证方法示例,分享给大家,具体如下: 项目地址: grading-system 基于session的认证和基于token的认证的方式已经被广泛使用.在session认证中,服务端会存储一份用户登录信息,这份登录信息会在响应时传递给浏览器并保存为Cookie,在下次请求时,会带上这份登录信息,这样就能识别请求来自哪个用户. 在基于session的认证中,每个用户都要生成一份session,这份session通常保存在内存中,随着用户量的增加,服务端的开销会增大

  • SpringBoot 中使用JSP的方法示例

    SpringBoot 中使用JSP的方法示例

    本文介绍了SpringBoot 中使用JSP的方法示例,分享给大家,具体如下: 依赖: <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>1.5.1.RELEASE</version> <relativePath/> <!-- l

  • SpringBoot中整合MyBatis-Plus的方法示例

    MyBatis 框架相信大家都用过,虽然 MyBatis 可以直接在 xml 中通过 SQL 语句操作数据库,很是灵活.但正其操作都要通过 SQL 语句进行,就必须写大量的 xml 文件,很是麻烦.于是 MyBatis-Plus 应运而生,作为 MyBatis 的增强工具,更是为我们开发效率得到了质的飞跃. 一.简介 1.MyBatis MyBatis 是一款优秀的持久层框架,它支持自定义 SQL.存储过程以及高级映射.MyBatis 免除了几乎所有的 JDBC 代码以及设置参数和获取结果集的工

  • idea中lombok启用的方法示例

    IDEA(版本:2020.1)中使用 lombok 有几个以下前提: 1. IDEA 安装了 lombok 插件,具体安装方法如下:File => Settings => Plugins => Marketplace.在 Marketplace 中搜索 lombok 并安装,安装成功后 lombok 会显示在 installed 标签下(如下图) 2. 启用了 Annotation processing,启用方法:File => Settings => Build, Exec

  • SpringBoot中使用多线程的方法示例

    SpringBoot中使用多线程的方法示例

    一.介绍 Spring是通过任务执行器(TaskExecutor)来实现多线程和并发编程,使用Spring提供的ThreadPoolTaskExecutor来创建一个基于线城池的TaskExecutor.在使用线程池的大多数情况下都是异步非阻塞的.节省更多的时间,提高效率. 工作原理 当主线程中调用execute接口提交执行任务时:则执行以下步骤:注意:线程池初始时,是空的. 如果当前线程数<corePoolSize,如果是则创建新的线程执行该任务 如果当前线程数>=corePoolSize,

随机推荐