React中使用UEditor百度富文本的方法
前言
本文将介绍笔者在React的项目中使用百度的富文本编辑器Ueditor的过程。注意本文不提供一条龙式的使用方法，只是将使用过程中的一些实现思路进行总结，供以参考。react项目中导入ueditor，会存在各种不正交的问题，需要注意。
引入
首先在ueditor官网下载最新安装包，然后在项目入口的html中导入（导入方式不一，可以采用import的方式，需要自行度娘。但是无论哪种引入方式，只要想自定义功能，不正交问题就难以避免QAQ）。不管三七二十一先跑起来再说。。
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>ueditor demo</title> </head> <body> <!-- 配置文件 --> <script type="text/javascript" src="path/ueditor.config.js"></script> <!-- 编辑器源码文件 --> <script type="text/javascript" src="path/ueditor.all.js"></script> ······ </body> </html>
在React项目中使用ueditor要注意
- 导入的路径，笔者使用的是项目经webpack打包之后的相对路径。
- 导入顺序，配置文件要先于源码。
- 笔者这种引入方式存在缓存问题，所以修改ueditor.all.js后需要及时清理缓存，测试新的代码。
封装
/**
* 封装UEditor
*/
import React from 'react';
import './index.less';
class UEditor extends React.Component {
constructor(props) {
super(props);
this.editor = {};
this.id = '';
}
······
componentDidMount() {
let UE = window.UE;
let id = this.id;
if (id) {
try {
/* 加载之前先执行删除操作，否则如果存在页面切换，
再切回带编辑器页面重新加载时不刷新无法渲染出编辑器 */
UE.delEditor(id);
} catch (e) {}
let ueditor = UE.getEditor(id, {
toolbars: [
['bold', 'italic', 'underline', 'kityformula', 'diyimg']
],
initialContent: '',
autoHeightEnabled: false,
autoFloatEnabled: false,
elementPathEnabled: false,
wordCount: false,
enableAutoSave: false,
initialFrameWidth: this.props.width,
initialFrameHeight: this.props.height
});
}
}
render() {
this.id = this.props.id;
return <div styleName="content" id={this.id} />;
}
}
export default UEditor;
笔者在项目中使用了加粗，斜体，下划线，插入图片，公式等功能，想要自定义配置均可参照ueditor.config.js修改。具体的将一一介绍，最后实现效果如下：
问题总结：
1. 禁止自动增高，改用滚动条
autoHeightEnabled: false initialFrameWidth：this.props.width initialFrameHeight：this.props.height
autoHeightEnabled可以阻止自动增高，然后再自定义容器宽度和高度。
2. 自定义全局样式，如容器的padding，p标签的line-height等
解决方法：ueditor.all.js的第6800多行的render方法，在其中可以自定义全局样式。
3. 导航条切换后，无法再次渲染
解决方法：在每次ueditor实例化之前，先删除对应的id
UE.delEditor(id);
原因分析：
从实例化和卸载实例的源码来看：
getEditor：
UE.getEditor = function (id, opt) {
var editor = instances[id];
if (!editor) {
editor = instances[id] = new UE.ui.Editor(opt);
editor.render(id);//渲染编辑器
}
return editor;
};
delEditor：
UE.delEditor = function (id) {
var editor;
if (editor = instances[id]) {
editor.key && editor.destroy();
delete instances[id]
}
};
UE在全局管理了一个实例池，每次实例化都会根据id检索，然后生成实例。从getEditor的源码中可以看出，ueditor的一个实例在第一次初始化时存在一个editor.render()，这是将此id的实例渲染到对应的id容器上。然而，当用户tab切换编辑器再切回来时，此时由于该实例已在实例池中存在，于是直接执行return editor，所以少了editor.render()这一步，于是不能重新渲染。所以，在Ueditor组件每次实例化之前，先进行delEditor卸载。这里需要注意，从delEditor中可以看出ueditor卸载实例时调用了实例的destroy方法。从destroy的注释来看：销毁编辑器实例，使用textarea代替 ，这解释了为什么在切换编辑器或者卸载编辑器时，会出现编辑器变为textarea的情况，如图所示：
4. 模拟placeholder实现预置文案
解决方法：在UE的实例中自定义方法，实现填充文字模拟placeholder的效果，代码如下：
//模拟placeholder和控制toolbar显示隐藏
UE.Editor.prototype.initDiy = function (placeholder) {
var _editor = this;
//获取焦点
_editor.addListener("focus", function () {
UE.isEditored = true;
var Text = `<p style="color: #CDCDCD">${placeholder}</p>`
var localHtml = _editor.getContent();
if (localHtml === Text) {
_editor.setContent("");//点击时清空
_editor.focus(true);
}
//使得其他工具条display置为none
var list = document.querySelectorAll('.edui-editor-toolbarbox');
list.forEach((ele) => {
ele.style.display = 'none';
});
var toolbar = findKey(_editor.key);
toolbar.style.display = 'block';
});
// 插入图片时存在问题
// _editor.addListener("blur", function () {
// var localHtml = _editor.getContent();
// if (localHtml === '') {
// _editor.setContent(`<p style="color: #CDCDCD">${placeholder}</p>`);
// }
// // window.activeEditor = _editor.key;
// });
_editor.ready(function () {
// _editor.fireEvent("blur");
_editor.setContent(`<p style="color: #CDCDCD">${placeholder}</p>`);//填充预置文案
});
}
//寻找工具条
function findKey(key) {
let ele = document.querySelector(`#${key}`);
let toolbar = ele.querySelector('.edui-editor-toolbarbox');
return toolbar;
}
原来，笔者实现的效果是点击时清空，失焦时还原。但是，在做自定义工具条时产生了bug（在5中我会细说），因此我采用了另一种方案：初始时设置预设文案，当用户聚焦时清空预设，用户失焦后不再恢复该预设文案。也就是将blur事件注释了。。。
5. 工具条显示在编辑器头部，显示为悬浮效果，默认隐藏，聚焦时出现
实现思路：将themes/default/css/ueditor.css中加入：
.edui-default .edui-editor-toolbarbox {
position: absolute;
······
top: -36px;
}
首先实现头部偏移，然后通过控制toolbar对应dom元素的display来隐藏工具条。实现效果如下：
下面解释一下为什么编辑器失焦的时候不恢复预置文案：
从4中的代码可以看出，我们是通过触发focus和blur事件分别清空和填充编辑器的内容。但是当我们点击工具条时，编辑器就会触发blur事件！！于是就会出现各种bug。以百度官网的ueditor为例，控制台输入：
为该编辑器注册点击事件，当点击加粗按钮时，控制台输出：
为了避免点击工具条时触发blur事件，笔者将自定义的blur事件全部注释了。
6. 自定义按钮和七牛云图片上传
首先，在ueditor.config.js中找到toolbars数组，增加一个diyimg字符串，然后在zh-cn.js找到labelMap数组，在末尾加上'diyimg': '插入图片' 。最后，在ueditor.all.js中找到btnCmds数组，加入diyimg字符串。初始化时使用这个字符串，工具条上就会显示一个按钮，但是我们发现他显示的是这样的：
这是因为ueditor默认使用加粗的icon作为自定义按钮的默认icon，所以为了使用默认的插入图片的图标，我们需要到themes/default/css/ueditor.css中，在最后一行加入：
/*自定义图片上传按钮 */
.edui-default .edui-toolbar .edui-for-diyimg .edui-icon {
background-position: -380px 0px;//这个位置是“插入图片”的icon，其他图标可自行调整
}
添加后，显示效果如下：
图标正常显示后，需要为该图标添加相应的点击事件，在ueditor.all.js中加入:
//图片上传
UE.commands['diyimg'] = {
execCommand : function(){
const upload = async(e) => {
······//完成图片上传的代码
}
const fileInput = document.getElementById('diyimg');//获取dom上隐藏的一个input标签
fileInput.onchange = upload;
fileInput.click();//触发input标签实现文件上传
return true;
},
queryCommandState:function(){
}
};
笔者这里不赘述图片上传的代码，度娘上很多，我简单说说实现的思路：
先实现一个插入图片的按钮，然后为该按钮注册相应的事件diyimg，然后在页面中添加一个input file标签并隐藏，diyimg事件会触发该标签的点击事件，弹出文件上传弹窗，此时选择文件点击后会触发onchange事件，执行相应的图片上传代码。上传成功到服务器后，服务器会返回图片对应的url，此时拿到该url填入对应编辑器实例，执行编辑器的插入图片的代码：
this.execCommand('insertimage', {
src: res.data.downloadUrl,//回调传来的url
width:'60'
// height:'45'
});
7. 给在编辑器内部的img等标签添加内联样式
ueditor默认存在xss过滤！！！这里以给img标签添加style=“vertical-top”为例。
首先要找到ueditor.config.js，在其中搜索xss，在第403行左右有代码：
img: [src', 'alt', 'title', 'width', 'height', 'id', '_src', 'loadingclass', 'class', 'data-latex'],
往数组里加入style字符串，然后在ueditor.all.js中搜索UE.commands['insertimage'] ，在第约11172行找到str，往里面加入内联样式即可。
一些吐槽：
1. 在react项目里使用script形式引入，感觉格格不入
2. 为了实现placeholder，各个事件之间存在不正交的现象。诸如点击按钮，却触发了编辑器的失焦事件
3. 在使用自定义的字数限制功能时，笔者使用ueditor的contentChange去检测内容字数，但是contentChange事件是定时的，所以计算字数会有问题。
实现中的问题及解决方法
1.上传图片时的跨域问题
在源码里 有 header['X_Requested_With'] = 'XMLHttpRequest';
后端需要配置 header('Access-Control-Allow-Headers', 'AccessToken, Content-Type, WebOrigin,X-Requested-With,X_Requested_With');
2. 进入文本编辑界面编辑器没有加载出来
可能原因： 放置编辑器的容器id, 容器下的编辑器已经存在
解决方法如代码所示
this.editor.ready(function (ueditor) {
if (!ueditor) {
// 如果初始化后ueditor不存在删除后重新调用
UE.delEditor(self.props.id);
self.initEditor();
}
})
3.注意这两个参数配置
'UEDITOR_HOME_URL': '/react/dist/ueditor/', // 编辑器实例路径,即ueditor文件包所放置的位置
serverUrl: window.api_host + '/innerMessage/uploadImage', // 后端提供加载图片接口，这是个共同接口接口包括了后端配置的config.json文件 通过url中action
值不同来区分（config|uploaimage 等）
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
vue项目中应用ueditor自定义上传按钮功能
由于上传地址问题,需要自定义上传按钮,效果如图 由于在页里面没有操作dom,所以想到了用vue的 自定义事件绑定$emit .$on来把点击事件传递给ueditor. 首先是给ueditor添加自定义按钮: 1,打开ueditor.all.js,找到btnCmds,大概在27854行,如下图,在数组添加一个自定义的按钮名称,我写的是"love" ueditor.all.js 2,给按钮添加事件 还是在ueditor.all.js文件内找到commands指令 给刚才定义的按钮扩展事件,
-
VUE + UEditor 单图片跨域上传功能的实现方法
UEditor官网说不提供单图片的跨域,所以只能自己解决.查了网上的很多方案,但是没看到和vue一起用的,不过倒是获得了一些思路.本着不想改太多源代码的基础上尝试着...一不小心就可以用了 解决方案:上传单图片的时后端不直接返回JSON,而是重定向到前端页面 前端:VUE 后端:WAMP + ThinkPHP5.0 前端 http://localhost:8888 1.去官网下载UEditor到vue中,打开ueditor.config.js配置服务器路径(本地域名可以去hosts文件中添加),
-
vue项目中使用ueditor的实例讲解
以vue-cli生成的项目为例 1.static文件夹下先放入ueditor文件 2.index.html添加如下代码 <script type="text/javascript" charset="utf-8" src="static/ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="
-
Vue2.0中集成UEditor富文本编辑器的方法
在vue的'项目中遇到了需要使用富文本编辑器的需求,在github上看了很多vue封装的editor插件,很多对图片上传和视频上传的支持并不是很好,最终还是决定使用UEditor. 这类的文章网上有很多,我进行了摸索.手写代码.汇总.排版,形成了这篇文章. 下载对应的UEditor源码 首先,去官网上下载UEditor的源码,根据你后台语言的不同下载对应的版本(PHP.Asp..Net.Jsp). http://ueditor.baidu.com/website/download.html 下载
-
vue中如何创建多个ueditor实例教程
前言 前一段时间公司Vue.js项目需要使用UEditor富文本编辑器,在百度上搜索一圈没有发现详细的说明,决定自己尝试,忙活了一天终于搞定了. 具体可以参考这篇文章:http://www.jb51.net/article/118413.htm ueditor是百度编辑器,官网地址:http://ueditor.baidu.com/website/ 完整的功能演示,可以参考:http://ueditor.baidu.com/website/onlinedemo.html 最近工作中要求升级,需要
-
SpringBoot整合UEditor的示例代码
当前开发项目涉及到富文本框,了解了不少富文本编辑器之后,最终决定使用度娘的UEditor.原因:功能强大,并且自带适配java后端的图片和视频上传. 项目地址 不多说,上一下该项目的地址: http://ueditor.baidu.com/website/ 简书不支持markdown其他站点的外链很遗憾 整合过程 后端改造 因为项目使用的springboot框架,而UEditor对于java后端的支持仅仅是给了一个jsp文件.因此,需要对该文件进行一下处理,修改为面向springboot的统一c
-
vue引入ueditor及node后台配置详解
最近公司的某个客户要用上我们公司的产品,他的后台管理里的富文本编辑器要求有点多,开始打算用Quill,但是发现Quill根本满足不了他的需求.在调研了市面上的富文本编辑器后,最后似乎只剩了百度的ueditor.虽然很丑~~~,不过没关系,政府网站和这种效果更搭:-D 我是不是说了什么(逃 vue引入ueditor 步骤 百度ueditor下载,随便哪个版本就好(本文章以php版为例),不需要特别全面功能的可以考虑下UM喽 将对应的文件夹放到static中 修改前端vue部分引用的ueditor.
-
vue中使用ueditor富文本编辑器
最近在做后台管理系统的时候遇到要使用富文本编辑器.最后选择了ueditor,我的项目使用 vue+vuex+vue-router+webpack+elementUI的方案完成框架的搭建, 1.下载UEditor官网最新的jsp版本的包,下载完成解压之后得到一个utf8-jsp的文件夹,里面包含的内容如下: 2.将这个文件夹改名为ueditor,并且移入自己项目中的static文件夹下,修改ueditor.config.js文件夹中的内容,如下图: 3.编写子组件 <template> <
-
React中使用UEditor百度富文本的方法
前言 本文将介绍笔者在React的项目中使用百度的富文本编辑器Ueditor的过程.注意本文不提供一条龙式的使用方法,只是将使用过程中的一些实现思路进行总结,供以参考.react项目中导入ueditor,会存在各种不正交的问题,需要注意. 引入 首先在ueditor官网下载最新安装包,然后在项目入口的html中导入(导入方式不一,可以采用import的方式,需要自行度娘.但是无论哪种引入方式,只要想自定义功能,不正交问题就难以避免QAQ).不管三七二十一先跑起来再说.. <!DOCTYPE HT
-
Java 在 Word 文档中使用新文本替换指定文本的方法
创作一份文案,经常会高频率地使用某些词汇,如地名.人名.人物职位等,若表述有误,就需要整体撤换.文本将介绍如何使用Spire.Doc for Java,在Java程序中对Word文档中的指定文本进行替换. 工具/原料 Free Spire.Doc for Java(免费版) IntelliJ IDEA Jar文件获取及导入 方法1:先从官网下载jar包. 导入步骤: 下载后,解压文件,并将lib文件夹下的Spire.Doc.jar文件导入java程序.参考如下导入效果: 方法2:可通过maven
-
layui的layedit富文本赋值方法
layedit赋值方法如下 /** * 设置编辑器内容 * @param {[type]} index 编辑器索引 * @param {[type]} content 要设置的内容 * @param {[type]} flag 是否追加模式 */ layedit.setContent(index, content, flag); flag是true,是追加模式, flag是false,赋值模式 以上这篇layui的layedit富文本赋值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,
-
在react中使用vue的状态管理的方法示例
我是要介绍一个新的 react 全局共享状态管理器,它和 vue 组件的状态管理一起同工之妙. 马上体验 在 react 状态管理领域,react-redux 可谓是只手遮天了,基于 flux 思想实现,小巧,immutable 的思想让数据变化可控.但 immutable 所带来的编程代价太大了,如果你要更新一个深层结构的对象的某个节点,写作将会是极其麻烦的一件事,而且还保不准会出错.为了保证 immutable,redux 的 reducer 机制让开发者掉光了头发.于是有了类似 dva.r
-
iOS利用NSMutableAttributedString实现富文本的方法小结
前言 在iOS开发过程中,经常会用到给字体加下划线,显示不同颜色和大小的字体等需求,经常遇到这种需求都是直接到百度或者谷歌直接把代码粘过来,并没有做系统的整理,今天刚好有时间,把这部分的内容整理一下,便于后续的开发,闲话不说,接下来就跟着我一起来了解一下NSMutableAttributedString吧. NSAttributedString NSAttributedString对象管理适用于字符串中单个字符或字符范围的字符串和关联的属性集(例如字体和字距).NSAttributedStrin
-
React中this丢失的四种解决方法
发现问题 我们在给一个dom元素绑定方法的时候,例如: <input type="text" ref="myinput" accept = "image/*" onChange = {this.selectFile} /> React组件中不能获取refs的值,页面报错提示:Uncaught TypeError: Cannot read property 'refs' of null or undefind 小栗子 import Re
-
Django集成百度富文本编辑器uEditor攻略
首先从 ueEditor官网 下载最新版本的包,目前官网上提供了ASP..NET.PHP.JSP版本的,django版本只有一个第三方个人开发的,但看上出配置起来稍微复杂一点. 这里不介绍uEditor的使用方法,也不过多解释uEditor的配置方法,官网上都有详细的文档和API介绍,下载的Demo中也有常用的方法的示例代码,这里主要介绍uEditor和django集成需要修改的地方. 这里下载任意一个版本的都可以,因为我们只需要把关于ueEditor前端部分的抽取出来,至于后端服务器的,我们自
-
vue集成百度UEditor富文本编辑器使用教程
在前端开发的项目中,难免会遇到需要在页面上集成一个富文本编辑器.那么,如果你有这个需求,希望可以帮助到你. vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于是我将百度富文本编辑器放到vue项目中使用.效果图如下 废话不多说. 1.使用vue-cli构建一个vue项目.然后下载UEditor源码,地址 把项目复制到vue项目的static文件下.目的是让服务可以访问到里面的文件,打开UEditor目录文件.这里下载的是jsp版本的.文件名字没有更改过.打
-
C#使用百度Ueditor富文本框实现上传文件
目录 使用背景 准备 创建项目 配置项目 使用 使用背景 项目中需要用的富文本框去上传视频,图片的话大部分都是可以的.相对来说,国外的富文本框很成熟.但鉴于文档是英语,这里使用了百度的富文本框. 采用的api的方式,调用接口进行上传文件.话不多说,开撸! 准备 创建一个.net mvc的项目.下载百度富文本框.net 版本的js文件. 创建项目 创建好项目之后,首先引用一下富文本框的js.目录如下: 然后新增一个单页.这里使用的 home 控制器 下的index页面.代码如下 : @{ View
-
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
在获取富文本后,又只要显示部分内容,需要去除富文本标签,然后再截取其中一部分内容:然后就是过滤器,在微信小程序中使用还是挺多次的,在vue及react中也遇到过 1.富文本去除html标签 去除html标签及 空格 let richText = ' <p style="font-size: 25px;color: white"> sdaflsjf的丰富及饿哦塞尔</p><span>dsfjlie</span>'; /* 去除富