UEditor问题整理
网上可以使用的富文本编辑器有很多，但是经过慎（sui）重（shou）思（yi）考（cha），选择了UEditor，毕竟是百度的东西，质量上应该经得起推敲，另外，使用别人的插件，总要去适应别人的编码习惯，或者掉进别人的坑里。既然都是要绕坑甚至填坑，索性选择一个名头响亮的。
天天吆喝富文本编辑器，究竟什么是富文本编辑器呢？答：富文本编辑器，Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器。 它提供类似于 Microsoft Word 的编辑功能，方便不会编写 HTML 的用户也可以根据需求设置各种文本格式。（百度）
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点。主要还是开源免费，具体可以参考官网：http://ueditor.baidu.com/website/index.html
使用很简单，直接把官网的代码拷过来
<!DOCTYPE HTML>
<html lang="en-US"> <head>
<meta charset="UTF-8">
<title>ueditor demo</title>
</head> <body>
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain">
这里写你的初始化内容
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var ue = UE.getEditor('container');
</script>
</body> </html>
另外：工具栏可以自己配置，除了修改配置文件，在实例化编辑器时也可以设置，代码如下：
<script type="text/javascript">
var ue = UE.getEditor('container',{toolbars: [
['fullscreen', 'source', 'undo', 'redo'],
['bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc']
]});
</script>
在使用过程中，不是看官网拷过来就可以，在实际项目框架和业务需求中，总会遇到一些问题，现在主要整理以下问题：
一、报错：（错误信息：Uncaught ReferenceError: ZeroClipboard is not defined ueditor.all.min.js:265）
经查看代码后发现 ueditor.../third-party/zeroclipboard/ZeroClipboard.js中 输出方法的地方是酱紫的
if (typeof define === "function" && define.amd) {
define(function() {
return ZeroClipboard;
});
} else if (typeof module === "object" && module && typeof module.exports === "object" && module.exports) {
module.exports = ZeroClipboard;
} else {
window.ZeroClipboard = ZeroClipboard;
}
意思就是说
如果当前页面的模块加载模式是AMD的 则定义模块
如果是CommonJs的，则输出到模块 ZeroClipboard
否则 把 ZeroClipboard 定义为全局变量
这样 解决方案就有两种。
①不使用模块加载模式来使用这个功能
这样方法需要修改一点源码，把上面这段代码替换成如下代码即可
if (typeof define === "function" && define.amd) {
define(function() {
return ZeroClipboard;
});
} else if (typeof module === "object" && module && typeof module.exports === "object" && module.exports) {
module.exports = ZeroClipboard;
}
window.ZeroClipboard = ZeroClipboard;
②如果不修改源码，就得在模块加载时做处理了
首先是修改配置
require.config({
baseUrl: '',
paths: {
ZeroClipboard: "./UEditor.../ZeroClipboard"//主要是加这句话
}
});
然后是在调用这个模块并把模块定义到全局变量
require(['ZeroClipboard'], function (ZeroClipboard) {
window['ZeroClipboard'] = ZeroClipboard;
});
方案1，可以解决该错误；主要参考：传送门
二、编辑器第一次加载正常，第二次加载不出来
1、网上解决方法：
jQuery(function($) {
UE.getEditor('_editor').render('_editor')
)}
该方法测试，第二次能正常加载，但第一次加载会出现两个编辑器。
2、另一个方法：
jQuery(function($) {
UE.delEditor('_editor');
var ue = UE.getEditor('_editor');
)}
在执行delEditor函数时报错，源码中destroy中的某个参数未定义报错。
3、最终解决方案
if(typeof(UE.getEditor("editor")) !='undefined'){
UE.getEditor("editor").destroy(); }
每次在关闭窗口或者编辑完成后都要执行下这个函数，用于销毁该编辑器，保证下次加载正常。
三、弹出模态框中显示编辑器时，部分字体大小、样式等带有下拉框，弹出框的工具无法使用，原因是被挡在模态框的下面。
解决：将ueditor.config.js中的zIndex数字改大
四、去掉弹出框“保存文本成功”
步骤1、在ueditor.config.js文件中，将enableAutoSave改为false，并将注释去掉。
步骤2、然后在ueditor.all.js文件中找到‘contentchange’，函数第一行添加代码：if (!me.getOpt('enableAutoSave')) {return;}
UEditor问题整理的更多相关文章
- Java 中使用 UEditor 整理【待续。。。】
1.简介 官网:http://ueditor.baidu.com/website/index.html 演示:http://ueditor.baidu.com/website/examples/ 2. ...
- Ueditor 增加模板
简介: Ueditor 是百度出的开源富文本编辑器,非常符合国人习惯!模板功能很好用. 官网:http://ueditor.baidu.com/website/ 定义自己的模板: 先用Ueditor编 ...
- UEditor百度编辑器，工具栏上自定义添加一个普通按钮
添加一个名叫“hougelou”的普通按钮在工具栏上: 第一步:找到ueditor.config.js文件中的toolbars数组,增加一个“hougelou”字符串,然后找到labelMap数组,对 ...
- UEditor上传图片到七牛云储存（java）
我们的网站一般放在虚拟空间或者服务器上,图片如果存在本地目录,会占用很多空间和流量,还增加了负担,好的办法是把图片存放到云储存服务里面,平时用url去拿 云储存:普遍说又拍云和七牛比较好,看到七牛免费 ...
- UEditor上传图片到七牛云储存（c#）
我们的网站一般放在虚拟空间或者服务器上,图片如果存在本地目录,会占用很多空间和流量,还增加了负担,好的办法是把图片存放到云储存服务里面,平时用url去拿 云储存:普遍说又拍云和七牛比较好,看到七牛免费 ...
- 每日学习心得：UEditor样式被过滤无法显示问题
前言: 上周开发中有用到开源的富文本编辑器UEditor,在使用的过程中遇到了样式被过滤无法显示问题,经过一番折腾终解决,此外,还有一些关于获取前台界面元素的一些总结. 1. UEditor样式被过滤 ...
- Thinkphp整合最新Ueditor编辑器
说到最新的富文本编辑器的确不少(ckeditor.fkeditor.ueditor),这些富文本编辑器如果单独使用基本上很方便,不需要做额外的配置,只要把官方的插件下载下来放到一个web容器中,看看 ...
- React入门资源整理
另外,附上我搜集的一些比较实用的学习资料,建议先看这些撸起来,再看什么乱七八糟的awsome系列. React入门资源整理 React项目新手指南 http://www.w3ctech.com/top ...
- JSP版（utf8编码）的Ueditor百度文章编辑器配置以及使用说明
二话不说,先上图: 我配置好的效果大致是这些功能:基本的文字编辑功能.图片上传功能.附件上传功能.百度/谷歌地图搜索截图.视/音频发布功能.这个插件是现今我用过觉得最舒服的编辑器,功能齐全强大,稍微修 ...
随机推荐
- PHP 限制访问ip白名单
一 上代码 config.php //ip白名单配置 'ipWlist'=>[ 'ifFilter'=>true, //是否开启白名单功能 'wlist'=>[ '10.0.0.1 ...
- 学习spring第三天
Spring第三天笔记 今日内容 Spring的核心之一 - AOP思想 (1) 代理模式- 动态代理 ① JDK的动态代理 (Java官方) ② CGLIB 第三方代理 (2) AOP思想在Spr ...
- Linux inode 理解
inode 硬盘的最小存储单位叫做"扇区"(Sector).每个扇区储存512字节(相当于0.5KB).操作系统读取硬盘的时候,不会一个个扇区地读取,这样效率太低,而是一次性读取一 ...
- rsync配置文件模板
用脚本实现服务端rsyncd的部署cat /server/scripts/rsync_install.sh #!/bin/bash #安装包 yum install -y rsync &> ...
- 许家印67亿买下FF恒大是要雪中送炭吗？
从大环境来看,当下新能源汽车已经是备受投资者青睐的领域.据不完全统计,当下国内已经有300余家电动汽车企业.而蔚来.小鹏.威马等动辄都融资上百亿元,显现出火爆的发展趋势.甚至就连董明珠董大姐也有着自己 ...
- [HNOI2019]鱼（计算几何）
看到数据范围n<=1000,但感觉用O(n^2)不现实,所以考虑方向应该是O(n^2logn). 一种暴力做法:用vector存到1点相同的2点和到2点相同的1点,然后枚举A,枚举BC,再枚举D ...
- 《VSTO开发中级教程》刘永富 著 清华大学出版社 在线购买
现在可以和作者 刘永富 通过“二手书直卖”这个APP直接买书. 二手书直卖 的下载方法: 方法一:加QQ群61840693,群共享中搜索“二手书直卖”,下载后打开即可. 方法二:从本帖下载:二手书直卖 ...
- linux下nfs共享目录
1. 关掉防火墙 systemctl disable firewalld.service 2. 关掉selinux vim /etc/selinux/config 修改第七行: ...
- zabbix监控Linux服务器CPU使用率大于40%的时候报警（实践版）
zabbix自带的模板里面有监控项,所以监控项就不用创建了,直接创建触发器就可以了,触发器细节如下: 名称:CPU使用率大于40% 严重性:严重 表达式:{121.201.54.50:system.c ...
- AD中导出所有计算机的（计算机名+操作系统类型）
要想用powershell管理域,首先先加载activedirectory模块 PS C:\> import-module activedirectory 下面就可以利用get-adcomput ...