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

}

else if (this.chrome45)

{

this.app.paste();

}

else if(this.edge)

{

this.app.paste();

}

};

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

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

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

<head>

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

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

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

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

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

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

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

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

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

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

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

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

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

</head>

<body>

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

<script type="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/08/07/ckeditor从word粘贴图片/

ckeditor不能粘贴word的问题的更多相关文章

  1. ckeditor不能粘贴word的问题如何解决

    自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...

  2. ckeditor复制粘贴word

    从word文档中直接粘贴到ckeditor编辑区,查看的时候格式会显示混乱,非常难看.解决方法:   CKEDITOR.cleanWord = function(h, i) { return h; i ...

  3. CKEDITOR无缝粘贴word

    由于工作需要必须将word文档内容粘贴到编辑器中使用 但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直 ...

  4. ckeditor+粘贴word

    最近公司做项目需要实现一个功能,在网页富文本编辑器中实现粘贴Word图文的功能. 我们在网站中使用的Web编辑器比较多,都是根据用户需求来选择的.目前还没有固定哪一个编辑器 有时候用的是UEditor ...

  5. Ckeditor IE下粘贴word中图片问题

    自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...

  6. ckeditor粘贴word图片且图片文件自动上传功能

    自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...

  7. ckeditor实现ctrl+v粘贴word图片并上传

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

  8. php+ tinymce粘贴word

    最近公司做项目需要实现一个功能,在网页富文本编辑器中实现粘贴Word图文的功能. 我们在网站中使用的Web编辑器比较多,都是根据用户需求来选择的.目前还没有固定哪一个编辑器 有时候用的是UEditor ...

  9. asp.net+ tinymce粘贴word

    公司做的项目需要用到粘贴Word功能.就是将word内容一键粘贴到网页编辑器(在线富文本编辑器)中.Chrome+IE默认支持粘贴剪切板中的图片,但是我要粘贴的文章存在word里面,图片多达数十张,我 ...

随机推荐

  1. WUSTOJ 1365: 矩阵旋转（Java）

    题目链接:

  2. Hibernate一对多自关联、多对多关联

    今天分享hibernate框架的两个关联关系    多对多关系注意事项 一定要定义一个主控方 多对多删除 主控方直接删除 被控方先通过主控方解除多对多关系,再删除被控方 禁用级联删除 关联关系编辑,不 ...

  3. (九) spring 使用自定义限定符注解

    案例一 定义接口  CD.java package interfacepackage; public interface CD { void play(); } 定义接口 player .java p ...

  4. （一）Lucene简介以及索引demo

    一.百度百科 Lucene是apache软件基金会4 jakarta项目组的一个子项目,是一个开放源代码的全文检索引擎工具包,但它不是一个完整的全文检索引擎,而是一个全文检索引擎的架构,提供了完整的查 ...

  5. GDB数据库SQL操作平台

    GDB数据库SQL操作平台 开发本软件的初衷:由于计算数据库要素层属性的时候,涉及到要计算多个字段,或者要根据代码计算名称,得一个一个的筛选并计算,过程比较繁琐,于是就想能不能通过像处理SQLServ ...

  6. Post请求数据传到后台+号变成了空格

    问题: 今天遇到一个问题:页面带有"+"号的数据,传到服务端接口,结果+号变成了空格.例如:传“1+1”变成了"1 1". 解决办法: 方案一: 将“+”号替换 ...

  7. JavaBean 详细

    一.什么是JavaBean? JavaBean是一个遵循特定写法的Java类,它通常具有如下特点: 这个Java类必须具有一个无参的构造函数 属性必须私有化. 私有化的属性必须通过public类型的方 ...

  8. numix Docky

    今天我们介绍这款主题适用于 Docky 启动器的 numix 主题,关于 Docky 大家已经应该很熟悉了,一款类似 Mac 底部软件停放的快捷启动码头.如图: 这款主题是 Docky 的主题,如果你 ...

  9. taglist and nerdtree

    函数:function! s:Tlist_Window_Exit_Only_Window()中的winbunr(2)改为winbunr(3),即只剩2个窗口时关闭,考虑到2个窗口肯定是同时存在,所以这 ...

  10. ASP.NET WEB应用程序（.network4.5）MVC 工作原理

    MVC就是模型.视图.控制器. 项目中控制器对应Controllers目录,视图对应Views目录,模型对应Models目录. 1.当我们创建一个控制器时,比如在Controllers目录新建一个名字 ...