百度编辑器(ueditor)踩坑,图片转存无法使用
在使用 百度编辑器 的过程中碰到了一些问题,图片转存功能无法使用, 即便是疯狂地在官方 Demo、文档、论坛甚至是 GitHub 上也没找到理想的答案。(┗|`O′|┛) (真是日了狗)

问题描述
默认情况下,从 Word 中复制的内容粘贴在编辑器时,图片不会自动上传保存,除非单独复制粘贴图片。
但是在官方 Demo 及演示中,Word 中的图片并不会变为上图中的提示贴图,而是变为尺寸与原图比例一致的一片空白。
与此雷同的一个问题是,当你插入一个锚点,点击 html 视图,发现标签一片空白,再切回来时锚点又不见了。
根据这点终于找到了解决的方案!ˋ( ° ▽、° ) (尴尬而不失礼貌的微笑)
解决办法
在配置文件 ueditor.config.js 的最下方有这样一组配置:
// xss 过滤是否开启,inserthtml等操作
,xssFilterRules: true
//input xss过滤
,inputXssFilter: true
//output xss过滤
,outputXssFilter: true
// xss过滤白名单 名单来源: https://raw.githubusercontent.com/leizongmin/js-xss/master/lib/default.js
,whitList: {
a: ['target', 'href', 'title', 'class', 'style'],
abbr: ['title', 'class', 'style'],
// ... 部分省略
i: ['class', 'style'],
img: ['src', 'alt', 'title', 'width', 'height', 'id', '_src', 'loadingclass', 'class', 'data-latex'],
ins: ['datetime'],
// ... 部分省略
video: ['autoplay', 'controls', 'loop', 'preload', 'src', 'height', 'width', 'class', 'style']
}
原来,在默认情况下 ueditor 开启了 XSS 过滤(过滤、输入过滤、输出过滤都有相应的配置开关),任何不在 whitList 白名单上的标签及属性都会在转换时丢失。
这就直接导致了一些需要使用特殊标签或属性的功能直接失效,比如插入音乐、插入锚点、图片转存等。
最直接的解决办法就是关闭 XSS 过滤,可以注释掉上述配置或将上述三项设为 false,另一种方案就是将需要的标签及属性添加到白名单。
- 插入锚点需要给
a标签添加name属性,给img标签添加anchorname属性 - 图片转存需要给
img标签添加word_img、style属性
其他受影响功能这里不再赘述,如需帮助请在下方留言!
总结
这个困扰了我好几天,甚至一心想着解决这个 BUG 给百度贡献点代码 ┑( ̄Д  ̄)┍
但是羊毛出在羊身上,找问题还是得找准方向,一针见血,瞬间解决!
百度编辑器(ueditor)踩坑,图片转存无法使用的更多相关文章
- vue使用百度编辑器ueditor踩坑记录
一.使用 下载放入项目 main.js引入 import '../static/UE/ueditor.config.js'; import '../static/UE/ueditor.all.js'; ...
- ueditor百度编辑器destoon的word图片转存功能
图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.js,找到UM ...
- 解决:百度编辑器UEditor,怎么将图片保存到图片服务器,或者上传到ftp服务器的问题(如果你正在用UE,这篇文章值得你看下)
在使用百度编辑器ueditor的时候,怎么将图片保存到另一个服务器,或者上传到ftp服务器?这个问题,估计很多使用UE的人会遇到.而且我百度过,没有找到这个问题的解决方案.那么:本篇文章就很适合你了. ...
- [转载]百度编辑器-Ueditor使用
前段时间发表过一篇关于“KindEditor在JSP中使用”的博文.这几天在沈阳东软进行JavaWeb方面的实习工作,在一个CMS系统的后台和博客板块中又要用到文本编辑器,突然发现了这个——百度编辑器 ...
- 关于百度编辑器UEditor的一点说明
大家在使用的时候要特别注意editor_config.js中的“URL”这个参数 我的理解:1.这个参数是editor整个结构的总路径 2.首先要把这个路径配置好了.才能正常的显示, ...
- [moka同学笔记]百度编辑器Ueditor自动换行,添加<p>的问题(摘录)
原文:http://www.cnblogs.com/kissdodog/p/5419919.html 百度编辑器Ueditor其实蛮好用的,后来使用了一段时间发现,每次打开后又保存,发现都会往内容的 ...
- 百度编辑器 ueditor .net开发
ueditor1.4.3 下载地址:http://pan.baidu.com/s/1bnCQVtd <!--editor--> <script type="text/j ...
- 百度编辑器Ueditor自动换行,添加<p>的问题
百度编辑器Ueditor其实蛮好用的,后来使用了一段时间发现,每次打开后又保存,发现都会往内容的前后都增加一个空白的<p></p>.刚开始以后是百度编辑器的问题,找了很长时间也 ...
- 帝国cms7.0整合百度编辑器ueditor教程
帝国cms7.0整合百度编辑器ueditor教程开始 1.根据自己使用的帝国cms版本编码下载对应的ueditor版本 下载地址 http://ueditor.baidu.com/website/do ...
- drupal7 安装百度编辑器Ueditor及后续使用
参考文章:drupal7安装百度编辑器ueditor 一.下载 1.需要下载安装的模块: 1.1.wysiwyg 1.2.ueditor 1.3Libraries 下载后安装在\sites\all\m ...
随机推荐
- 对比分析HashMap、LinkedHashMap、TreeMap
HashMap的原理 :简单地说,HashMap 在底层将 key-value 当成一个整体进行处理,这个整体就是一个 Entry 对象.HashMap 底层采用一个 Entry[] 数组来保存所有的 ...
- Java 之 Maven 基础
一.Maven 介绍 1.什么是 Maven Maven 是一个项目管理工具,它包含了一个项目对象模型(POM:Project Object Model),一组标准集合,一个项目生命周期(Projec ...
- SAP错误消息调试之七种武器:让所有的错误消息都能被定位
目录 长生剑 - SAPGUI Where Used List 碧玉刀 - ABAP调试器观察点 霸王枪 - ABAP调试器动态断点 多情环 - ABAP代码静态扫描 孔雀翎 - SAT 离别钩 - ...
- 【TTS】传输表空间Linux asm -> AIX asm
[TTS]传输表空间Linux asm -> AIX asm 一.1 BLOG文档结构图 一.2 前言部分 一.2.1 导读和注意事项 各位技术爱好者,看完本文后,你可以掌 ...
- Docker搭建私用仓库
搭建私有仓库 # 1.查找registry,官方的私用仓库镜像 docker search registry # 2.下载私有仓库镜像 docker pull registry # 3.创建并后台运行 ...
- 【监控】jvisualvm之jmx远程连接 tomcat war启动应用
一.tomcat相应jmx配置 1.在tomcat bin目录下的catalina.sh文件中添加如下配置: CATALINA_OPTS="$CATALINA_OPTS -Dcom.sun. ...
- 划分土地(how many pieces of land)
题目描述: 给一个椭圆,上面有n个点,两两连接这n个点,得到的线段能把椭圆分为几个区域? 思路: 首先想想,n个点在椭圆边缘,每两个点两两连接有\(C^2_n\)条线段,这些线段交于很多点,求这些线段 ...
- 微信小程序中,如果没有参数,如何设置默认参数?
现在学会小程序,这方面的知识,需要积累. 现在的情况是这样: 如果想从后端获取产品列表,而这些列表是可以根据分类来获取的,也是可以获取所有产品的. 那么,为了不使小程序报错,那么,我们就可以将不传的参 ...
- 在inux中安装redis的时候,会出现下面的这个异常
是因为没有安装c++的编译器 安装c++的编译器: yum -y install gcc-c++ 然后再使用命令执行make就可以了 ,如果你遇到这个错误以后,一定要先将redis的解压包删掉以后,再 ...
- pandas 6 时间
类 备注 创建方法 Timestamp 时刻数据 to_datetime,Timestamp DatetimeIndex Timestamp的索引 to_datetime,date_range,Dat ...