Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧

我希望打开文档doc直接复制粘贴到富文本编辑器,直接发布

感觉这个似乎很困难,因为Ueditor本身不支持,粘贴后直接就是空白,这里面一定有原因。

好,开始尝试UMeditor,Chrome只能获得本地路径,无法读取文件。

https://ueditor.baidu.com/website/umeditor.html(有兴趣可以试试)

难道就这么失败了?

,但是我意外发现UMeditor竟然支持粘贴word中的多张图片(仅支持IE11,不支持IE10以下版本、以及Chrome等)

切换HTML,会看到你的图片被组织成base64

nice,机会来了,既然IE支持复制word中的多张图片直接粘贴base64,既然有了base64我们就有办法上传转图片啦!

那么我们来改造Ueditor,让他支持IE11(总比没得用强吧)

打开你的ueditor.all.js(1.4.3版本以下行号根据自己使用的版本可能不同)

1、注释掉14679行(暂时不明确有什么不良影响)

//执行默认的处理
//me.filterInputRule(root);

2、在28725行插入以下代码(如果是使用IE11粘贴会得到base64,先用占位符占位,再逐个把base64专成Blob文件并上传,上传完成再替换为你的img属性src为服务器图片url)

                //ie11粘贴图片base64,此处用于上传
if (baidu.editor.browser.ie11above) {
var eles = editor.document.getElementsByTagName('img');
var imgs = [];
for (var i = 0; i < eles.length; i++) {
var a = eles[i];
var src = a.getAttribute('src');
if (src.indexOf('data:image') == 0) {
a.setAttribute('width', a.width);
a.setAttribute('height', a.height);
a.className = 'loadingclass';
a.setAttribute('_src', src);
a.setAttribute('src', me.themePath + me.theme + '/images/spacer.gif');
imgs.push(a);
}
}
function parseBlob(data) {
var arr = data.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
var fdoc = editor.container.ownerDocument;
var div = fdoc.getElementById('ie11up_step');
if (div == null) {
div = fdoc.createElement('div');
fdoc.getElementsByClassName('edui-toolbar')[0].appendChild(div);
div.up = 0;
div.str = '图片上传中...(#/' + imgs.length + ')';
div.style.fontSize = '12px';
}
function upNextOne() {
if (imgs.length == 0) {
div.parentNode.removeChild(div);
return;
}
var a = imgs[0];
imgs = imgs.slice(1, imgs.length);
var xhr = new XMLHttpRequest();
var fd = new FormData();
fd.append("upfile", parseBlob((xhr.a = a).getAttribute('_src')), 'paste.png');
xhr.upload.addEventListener("progress", function (a) {
}, false);
xhr.addEventListener("load", function () {
var d = JSON.parse(this.response);
if (d && d.state == 'SUCCESS') {
this.a.setAttribute('src', d.url);
this.a.removeAttribute('_src');
this.a.removeAttribute('class');
div.innerText = div.str.replace('#', ++div.up);
upNextOne();
}
}, false);
xhr.open("POST", editor.getActionUrl('uploadimage'));
xhr.send(fd);
}
if (imgs.length > 0)
upNextOne();
}

3、处理ueditor提供的uploadimage方法

大功告成

客户已经使用半年,没有问题,非常有用,非常方便的功能,希望博客园也改良一下TinyMCE。

让富文本编辑器支持复制doc中多张图片直接粘贴上传的更多相关文章

  1. PHP UEditor富文本编辑器 显示 后端配置项没有正常加载,上传插件不能正常使用

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码... 问题描述 我的编辑器在本地测试的时候没问 ...

  2. C# WinForm 富文本编辑器 用kindeditor实现本地图片只选取不上传到编辑器

    以下资料有参考网上其它童鞋作品,原作者看到务喷!!!! 以下资料有参考网上其它童鞋作品,原作者看到务喷!!!! 重要的事只要说两遍... 网上找了几天关于WinForm富文本编辑效果都不理想,各种坑, ...

  3. Selenium常用API用法示例集----下拉框、文本域及富文本框、弹窗、JS、frame、文件上传和下载

    元素识别方法.一组元素定位.鼠标操作.多窗口处理.下拉框.文本域及富文本框.弹窗.JS.frame.文件上传和下载 元素识别方法: driver.find_element_by_id() driver ...

  4. 富文本编辑器直接从 word 中复制粘贴公式

    在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper. 通过知乎提供的思路找到粘贴的原理,通过TheViper找 ...

  5. 富文本编辑器实现从word中复制图片(外挂)

    1问题 基于web的富文本编辑器的功能普遍较弱,而word是公认的宇宙第一好用的文档编辑器,所以许多人都习惯先在word中编辑,然后再将内容粘到web富文本编辑器中. 但是,这种操作有一个问题:图片带 ...

  6. 百度富文本编辑器ueditor在jsp中的使用(ssm框架中的应用)

    折腾了一下午终于把百度富文本编辑器ueditor搞定了!   项目地址:https://github.com/724888/lightnote_new     首先我参考了一个ueditor的demo ...

  7. KindEditor富文本编辑器, 从客户端中检测到有潜在危险的 Request.Form 值

    在用富文本编辑器时经常会遇到的问题是asp.net报的”检测到有潜在危险的 Request.Form 值“一般的解法是在aspx页面   page  标签中加上 validaterequest='fa ...

  8. Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合

    日常啰嗦 本来这一篇和接下来的几篇是打算讲一下JDBC和数据库优化的,但是最近很多朋友加我好友也讨论了一些问题,我发现大家似乎都是拿这个项目作为练手项目,作为脚手架来用的,因此呢,改变了一下思路,JD ...

  9. 百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明

    ====================================================================== [百度Web富文本编辑器ueditor在ASP.NET M ...

随机推荐

  1. 使用 idHTTP 获取 UTF-8 编码的中文网页

    uses IdHTTP; const Url = 'http://del.cnblogs.com'; procedure TForm1.Button1Click(Sender: TObject); v ...

  2. node的cookie-parser和express-session

    let express = require('express'); let cookieParser = require('cookie-parser'); let expressSession = ...

  3. iptables防火墙配置

    iptables防火墙配置 一.防火墙简介 1.功能: 1)通过源端口,源IP地址,源MAC地址,包中特定标记和目标端口,IP,MAC来确定数据包是否可以通过防火墙 2)分割内网和外网[附带的路由器的 ...

  4. Maven Archetype简介以及搭建

    为什么会写这篇文章,因为公司先在构建项目骨架都是用的 maven archetype ,身为一个上进的渣渣猿,自己还是有必要了解下这个东西的. Archetype介绍 Archetype 是一个 Ma ...

  5. codeforces 1051 D. Bicolorings (DP)

    D. Bicolorings time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...

  6. ubuntu 安装 postgresql

    安装环境: Ubuntu 10.04-desktop-i386 PostgreSQL 8.4 1. 安装PostgreSQL 输入如下命令 sudo apt-get install postgresq ...

  7. BZOJ3456 城市规划(多项式求逆)

    设f[i]为连通图的数量,g[i]为不连通图的数量,显然有f[i]=2i*(i-1)/2-g[i],g[i]通过枚举1所在连通块大小转移,有g[i]=Σf[j]*C(i-1,j-1)·2(i-j)*( ...

  8. BZOJ1124 POI2008枪战Maf(环套树+贪心)

    每个点出度都为1,可以发现这张图其实是个环套树森林,树中儿子指向父亲,环上边同向. 首先自环肯定是没救的,先抬出去. 要使死亡人数最多的话,显然若一个点入度为0其不会死亡,而一个孤立的环至少会留下一个 ...

  9. day10 递归

    死循环,因此递归必须要定义一个明确的结束条件 def calc(n): print(n) calc(n) calc(10) return 表示终止符号,最终会得出一个确切的返回值,且可以赋值 def ...

  10. Dependency Walker使用说明[转]

    在Windows世界中,有无数块活动的大陆,它们都有一个共同的名字——动态链接库.现在就让我们走进这些神奇的活动大陆,找出它们隐藏已久的秘密吧! 初窥门径:Windows的基石 随便打开一个系统目录, ...