在使用 百度编辑器 的过程中碰到了一些问题,图片转存功能无法使用, 即便是疯狂地在官方 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,另一种方案就是将需要的标签及属性添加到白名单。

  1. 插入锚点需要给 a 标签添加 name 属性,给 img 标签添加 anchorname 属性
  2. 图片转存需要给 img 标签添加 word_imgstyle 属性

其他受影响功能这里不再赘述,如需帮助请在下方留言!

总结

这个困扰了我好几天,甚至一心想着解决这个 BUG 给百度贡献点代码 ┑( ̄Д  ̄)┍

但是羊毛出在羊身上,找问题还是得找准方向,一针见血,瞬间解决!

百度编辑器(ueditor)踩坑,图片转存无法使用的更多相关文章

  1. vue使用百度编辑器ueditor踩坑记录

    一.使用 下载放入项目 main.js引入 import '../static/UE/ueditor.config.js'; import '../static/UE/ueditor.all.js'; ...

  2. ueditor百度编辑器destoon的word图片转存功能

    图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.js,找到UM ...

  3. 解决:百度编辑器UEditor,怎么将图片保存到图片服务器,或者上传到ftp服务器的问题(如果你正在用UE,这篇文章值得你看下)

    在使用百度编辑器ueditor的时候,怎么将图片保存到另一个服务器,或者上传到ftp服务器?这个问题,估计很多使用UE的人会遇到.而且我百度过,没有找到这个问题的解决方案.那么:本篇文章就很适合你了. ...

  4. [转载]百度编辑器-Ueditor使用

    前段时间发表过一篇关于“KindEditor在JSP中使用”的博文.这几天在沈阳东软进行JavaWeb方面的实习工作,在一个CMS系统的后台和博客板块中又要用到文本编辑器,突然发现了这个——百度编辑器 ...

  5. 关于百度编辑器UEditor的一点说明

    大家在使用的时候要特别注意editor_config.js中的“URL”这个参数 我的理解:1.这个参数是editor整个结构的总路径          2.首先要把这个路径配置好了.才能正常的显示, ...

  6. [moka同学笔记]百度编辑器Ueditor自动换行,添加<p>的问题(摘录)

     原文:http://www.cnblogs.com/kissdodog/p/5419919.html 百度编辑器Ueditor其实蛮好用的,后来使用了一段时间发现,每次打开后又保存,发现都会往内容的 ...

  7. 百度编辑器 ueditor .net开发

    ueditor1.4.3 下载地址:http://pan.baidu.com/s/1bnCQVtd   <!--editor--> <script type="text/j ...

  8. 百度编辑器Ueditor自动换行,添加<p>的问题

    百度编辑器Ueditor其实蛮好用的,后来使用了一段时间发现,每次打开后又保存,发现都会往内容的前后都增加一个空白的<p></p>.刚开始以后是百度编辑器的问题,找了很长时间也 ...

  9. 帝国cms7.0整合百度编辑器ueditor教程

    帝国cms7.0整合百度编辑器ueditor教程开始 1.根据自己使用的帝国cms版本编码下载对应的ueditor版本 下载地址 http://ueditor.baidu.com/website/do ...

  10. drupal7 安装百度编辑器Ueditor及后续使用

    参考文章:drupal7安装百度编辑器ueditor 一.下载 1.需要下载安装的模块: 1.1.wysiwyg 1.2.ueditor 1.3Libraries 下载后安装在\sites\all\m ...

随机推荐

  1. yum -y install java-1.8.0-openjdk-devel.x86_64

    yum -y install java-1.8.0-openjdk-devel.x86_64

  2. 关于创建Web图像时应记住的五个要素

    1. 格式与下载速度 当前,Web上用的最广泛的三种格式是GIF.PNG和JPEG.我们的目标是选择质量最高,同时文件最小的格式. WebP图像格式 谷歌建立了另一种图像格式,名为WebP. 这种格式 ...

  3. Mybatis 中的转义字符及常用查询

    转译符 1.特殊字符转译 < < 小于 > > 大于 & & 与 ' ’ 单引号 " " 双引号 需要注意的是分号是必不可少的. 比如 a ...

  4. ORACLE ASMLIB

    ORACLE ASMLIB   This blog post is more of a note for myself on configuring ASMLib. ASMLib is an opti ...

  5. 使用PATH变量进行Linux权限升级技巧

    0x00 前言 在解决了几个OSCP挑战之后,我们决定写一篇关于用于Linux权限升级的各种方法的文章,这对我们的读者在其渗透测试项目中有所帮助.在本文中,我们将学习“使用$path变量的各种方法”以 ...

  6. 介绍一个免费的云开发工具:Cloud Shell

    上周和一德国同事吹牛的时候,他说最近业余时间在玩一个东东,叫做Cloud Shell,Google出品.Jerry之前听说过国内的阿里云也提供过类似的解决方案,即在云端提供一个受限制的Linux环境并 ...

  7. Linux加密和数据安全性

    加密和安全 墨菲定律 墨菲定律:一种心理学效应,是由爱德华·墨菲(Edward A. Murphy)提出的, 原话:如果有两种或两种以上的方式去做某件事情,而其中一种选择方式将导 致灾难,则必定有人会 ...

  8. mysqdump+binlog恢复数据

    备份全库 [root@db01 b]# mysqldump -uroot -poldboy123 -A > /b/full.sql Warning: Using a password on th ...

  9. IDA7.0安装findcrypt插件

    效果图附上 安装成功的话,快捷键Ctrl+Alt+F可以调出上图的窗口,识别一些常见的算法,上面识别出是Base64加密 插件链接放上:https://github.com/polymorf/find ...

  10. [转载]Fiddler界面详解

    转载地址:http://www.cnblogs.com/chengchengla1990/p/5681775.html Statistics 页签 完整页签如下图: Statistics 页签显示当前 ...