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

通过知乎提供的思路找到粘贴的原理，通过TheViper找到粘贴图片的方法。

其原理为一下步骤：

监听粘贴事件；【用于插入图片】

获取光标位置；【记录图片插入位置】

获取剪切板内容；【主要是获取文件】

上传剪切板图片；

在指定光标位置插入图片。

以下是代码部分：

1.获取光标代码部分，大部分都是直接利用TheViper的代码，只是做了简单的修改，在获取光标的位置添加了插件子集document对象，因为直接使用document对象获取不到光标位置

var isSupportRange = typeof document.createRange == 'function';

var currentRange,

_parentElement;

// 获取当前光标多在位置

function getCurrentRange(target) {

var selection,

range;

if (isSupportRange) {

selection = target.getSelection();

if (selection.getRangeAt && selection.rangeCount) {

range = selection.getRangeAt(0);

_parentElement = range.commonAncestorContainer;

}

} else {

range = target.selection.createRange();

_parentElement = range.parentElement();

}

return range;

}

function saveSelection(target) {

currentRange = getCurrentRange(target);

}

function _restoreSelection() {

if (!currentRange) {

return;

}

var selection,

range;

if (isSupportRange) {

selection = document.getSelection();

selection.removeAllRanges();

selection.addRange(currentRange);

} else {

range = document.selection.createRange();

range.setEndPoint('EndToEnd', currentRange);

if (currentRange.text.length === 0) {

range.collapse(false);

} else {

range.setEndPoint('StartToStart', currentRange);

}

range.select();

}

}

function insertImage(html,target) {

if (document.selection)

currentRange.pasteHTML(html);

else

target.execCommand("insertImage", false, html);

saveSelection();

}

2.监听粘贴事件、获取上传图片、上传至服务器并添加至编辑器

CKEDITOR.instances['document-info'].on('instanceReady', function(e) {

this.document.on('paste', function(event) {

var target = event.sender.$;

saveSelection(target);

var items = event.data.$.clipboardData.items;

if (!items) {

return;

}

for (var i = items.length - 1; i >= 0; i--) {

if (items[i].kind == 'file' && items[i].type.indexOf('image/') !== -1) {

var file = items[i].getAsFile();

if (file) {

if (file.size === 0) {

return;

}

var formData = new FormData();

formData.append("file", file);

$.ajax({

method: 'POST',

url: url,

data: formData,

processData: false,

contentType: false,

success: function(response) {

var _img_html = response.url;

insertImage(_img_html,target);

}

});

}

}

}

});

});

优化后的代码变得更加精简

//手动粘贴

this.PasteManual = function ()

{

if (!this.setuped)

{

this.setup_tip(); return;

}

if (!this.chrome45 && !_this.edge)

{

this.app.paste();

}

elseif (this.chrome45)

{

this.app.paste();

}

elseif(this.edge)

{

this.app.paste();

}

};

前台的引用也非常的简单：

<!DOCTYPEhtmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8"/>

<title>WordPaster-jsp-ueditor-1.2.6.0</title>

<scripttype="text/javascript" src="ueditor.config.js" charset="utf-8"></script>

<scripttype="text/javascript" src="ueditor.all.min.js" charset="utf-8"></script>

<linktype="text/css" rel="Stylesheet" href="WordPaster/css/WordPaster.css"/>

<linktype="text/css" rel="Stylesheet" href="WordPaster/js/skygqbox.css" />

<scripttype="text/javascript" src="WordPaster/js/json2.min.js" charset="utf-8"></script>

<scripttype="text/javascript" src="WordPaster/js/jquery-1.4.min.js" charset="utf-8"></script>

<scripttype="text/javascript" src="WordPaster/js/w.edge.js" charset="utf-8"></script>

<scripttype="text/javascript" src="WordPaster/js/w.app.js" charset="utf-8"></script>

<scripttype="text/javascript" src="WordPaster/js/w.file.js" charset="utf-8"></script>

<scripttype="text/javascript" src="WordPaster/js/skygqbox.js" charset="utf-8"></script>

<scripttype="text/javascript" src="WordPaster/js/WordPaster.js" charset="utf-8"></script>

</head>

<body>

<textareaname="后台取值的key"id="myEditor">这里写你的初始化内容</textarea>

<scripttype="text/javascript">

var pasterMgr = new WordPasterManager();

pasterMgr.Config["PostUrl"] = "http://localhost:8080/WordPaster2UEditor1.4x/upload.jsp"

pasterMgr.Load();//加载控件

var ue = UE.getEditor('myEditor');

ue.ready(function() {

//设置编辑器的内容

ue.setContent('hello');

//获取html内容，返回: <p>hello</p>

var html = ue.getContent();

//获取纯文本内容，返回: hello

var txt = ue.getContentTxt();

pasterMgr.SetEditor(ue);

});

</script>

</body>

</html>

数据提交部分需要注意

processData: false,

contentType: false,

这两项需要设置，否则文件不能正常上传

该问题没有完美的解决，存在以下疑问，如有想法，请告知。

1.从word中复制图片为rtf格式，不能被保存，并解析图片，有待解决；

2.只能单个文件复制，多个文件复制存在问题。这个问题使用WordPaster插件解决掉了，能够批量上传Word中的所有图片，并且保留Word样式，效果如下：

服务器能够接收到图片，并进行保存

编辑器中的图片地址已经全部被替换成了服务器的图片地址，其它的用户也能够正常访问

在接触该问题前期，错误的解决思路：

1.通过input控件上传，因浏览器安全设置原因，不允许input:file赋值；

2.使用convas将图片转换为base64存储，该处也有问题，传唤base64时，存在跨域问题。

经过这些处理基本上实现了一个完整的Word图片上传插件（WordPaster），能够自动上传剪切板中的图片，能够自动上传Word中的所有图片，使用起来非常的方便，有需要的朋友可以直接下载使用：http://blog.ncmem.com/wordpress/2019/10/15/word-%e5%9b%be%e7%89%87%e8%83%bd%e7%b2%98%e5%88%b0%e7%99%be%e5%ba%a6%e7%bc%96%e8%be%91%e5%99%a8%e5%90%97/

WORD 图片能粘到百度编辑器吗的更多相关文章

  1. 百度编辑器（ueditor）踩坑，图片转存无法使用

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

  2. 百度ueditor实现word图片自动转存

    官网地址http://ueditor.baidu.com Git 地址 https://github.com/fex-team/ueditor 参考博客地址 http://blog.ncmem.com ...

  3. yii2解决百度编辑器umeditor图片上传问题

    作者:白狼 出处:http://www.manks.top/article/yii2_umeditor_upload本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原 ...

  4. FLASH图片上传功能—从百度编辑器UEditor里面提取出来

    为了记录工作中碰到的各种问题,以及学习资料整理,今天开始,将以往的文章进行了一个整理,以后也开始认真的记录学习过程中的各种问题 在HTML里面的文件上传功能一直是个问题,为了实现上传文件大小限制,怎样 ...

  5. 百度编辑器前后端二开图片上传Js Thinkphp tp5 ueditor

    百度编辑器图片上传Jsueditor.all.min.js 下载链接 链接:https://pan.baidu.com/s/1VNgw9ELgRRHKeCQheFkQTw 提取码:fnfi 使用方法: ...

  6. ueditor 百度编辑器图片上传 接 node.js 及一些前端自定义

    百度编辑器 用node.js 做服务端 demo 大神已整理的 记录一下 以作参考 https://github.com/netpi/ueditor 1. 前端图片工具栏上传input file在这里 ...

  7. 织梦替换ueditor百度编辑器，支持图片水印 教程

    1下载ueditor百度编辑器 2 把下载的zip解压得到ueditor文件夹,把解压到的ueditor文件夹扔进你网站的include文件夹去 3 打开 /include/inc/inc_fun_f ...

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

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

  9. 百度编辑器ueditor的图片地址修正

    我用的百度编辑器为1.4.2的,相对于现在这个时间来说是比较新的.之前去的1.3版的,后来更新到1.4之后出现路径问题.因为今天晚上出现特别奇怪的问题,所以特地又整了一遍,发现这玩意还是得自己弄通了好 ...

随机推荐

  1. Openstack_通用模块_Oslo_vmware 创建/删除 vCenter 虚拟机

    目录 目录 oslovmware Connect to vCenter Server Create VirtualMachine for vCenter 常用的虚拟机配置项 删除虚拟机 oslo.vm ...

  2. python常用包官网

    Pandas http://pandas.pydata.org/pandas-docs/stable/reference/api/pandas.Series.reset_index.html?high ...

  3. 券商VIP交易通道

    打新不成就炒新.随着新股发行上市的再次重启,巨大的获利机会引来投资者的争相竞逐,可并非所有投资者都能抢到新股筹码.“每天都在涨停板追这些新股,但从来没有买到过.”证券时报记者在采访中听到不少中小散户如 ...

  4. 35 怎么优化join

    35 怎么优化join 上一篇介绍了join的两种算法:nlj和bnl create table t1(id int primary key, a int, b int, index(a)); cre ...

  5. winform项目中开发的一套UI控件库

    https://github.com/houyhea/winform-control-lib winform-control-lib 曾经在一个winform项目中开发的一套UI控件库 类图:  效果 ...

  6. python 列表、字典多排序问题

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/justin051/article/det ...

  7. Varint数值压缩存储方法

    coming from http://www.cnblogs.com/smark/archive/2012/05/03/2480034.html 在编写网络通讯的时候我们经常需要把一些数据存储到byt ...

  8. Java：CAS(乐观锁)

    本文讲解CAS机制,主要是因为最近准备面试题,发现这个问题在面试中出现的频率非常的高,因此把自己学习过程中的一些理解记录下来,希望能对大家也有帮助. 什么是悲观锁.乐观锁?在java语言里,总有一些名 ...

  9. vscode怎么修改颜色主题里的某种颜色

    我习惯用深色主题, 齿轮--->颜色主题 ---->monokai是我的菜. 比较精神,又不刺眼. 但是这个主题的注释的颜色太浅了. 几乎和背景重合. 注释很重要, 能体现和记录自己的代码 ...

  10. highcharts控制X刻度值整数调整

    function chartData() { var app_id = $('.app_id').attr('app_id'); var gener_id = $('.gener_id').attr( ...