科讯使用的:ckeditor编辑器.复制word图片.一直沾不上去.谁有好的解决办法呢
在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题，于是各种网上扒拉，终于找到解决方案，在这里感谢一下知乎中众大神以及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中的所有图片，使用起来非常的方便，有需要的朋友可以直接下载使用：
科讯使用的:ckeditor编辑器.复制word图片.一直沾不上去.谁有好的解决办法呢的更多相关文章
- Office 2010 word无法创建工作文件 请检查临时环境变量 的解决办法
Office 2010 word无法创建工作文件 请检查临时环境变量 的解决办法 http://hi.baidu.com/netshen/item/207fd935d452e0e9df2221c9 如 ...
- ckeditor编辑器从word粘贴公式
由于工作需要必须将word文档内容粘贴到编辑器中使用 但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直 ...
- 富文本编辑器复制word
这种方法是servlet,编写好在web.xml里配置servlet-class和servlet-mapping即可使用 后台(服务端)java服务代码:(上传至ROOT/lqxcPics文件夹下) ...
- ueditor+复制word图片粘贴上传
Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能.但是无法 ...
- 帝国CMS编辑器粘贴Word图片
图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码 目前限chrome浏览器使用,但是项目要求需要支持所有的浏览器,包括Windows和macOS系统.没有办 ...
- ueditor+复制word+图片不能上传
最近公司做项目需要实现一个功能,在网页富文本编辑器中实现粘贴Word图文的功能. 我们在网站中使用的Web编辑器比较多,都是根据用户需求来选择的.目前还没有固定哪一个编辑器 有时候用的是UEditor ...
- 10.20_web编辑器复制粘贴图片
(1) http://q.cnblogs.com/q/19865/ (2) http://www.oschina.net/search?scope=project&q=FreeTextBox
- word: 插入或修改文字时后面的字消失 解决办法
在编辑Word文档中的文字时,我们有时需要插入或修改文字,可是在插入或修改时会发现改动处后面的文字会消失.比如插入或修改3个字,后面的文字随之也会消失3个,这时该怎么办呢? 点击-“文件”-“选项”- ...
- class-dump 复制到/usr/bin目录不可写，Operation not permitted 解决办法
许多升级了OSX 10.11的朋友在配置class-dump的时候,会发现书上推荐的class-dump存放目录/usr/bin不再可写,如下所示: Operation not permitted 把 ...
随机推荐
- Vue知识整理5：v-bind绑定属性（Class 与 Style 绑定）
通过v-bind实现Class 与 Style 绑定,方便调整属性的值
- Spring Boot系列(三) Spring Boot 之 JDBC
数据源 类型 javax.sql.DataSource javax.sql.XADataSource org.springframework.jdbc.datasource.embedded,Enbe ...
- 今天起，重新开头学习Java － 一、安装环境
先拜领路人 https://blog.csdn.net/u011541946/article/category/6951961/3? 一.安装JDK 1. 下载 www.java.com JDK是Ja ...
- The Log-Structured Merge-Tree(译)
coming from http://duanple.blog.163.com/blog/static/7097176720120391321283/
- [Git] 007 三棵树以及向本地仓库加入第一个文件
1. "三棵树" 1.1 前言 理论上要稍稍复杂一点 我在这里说得简化一点 顺道挖个坑 下回具体介绍 坑号编码:Git07-1 1.2 看图 1.3 简介 树左:工作区(平时写代码 ...
- 本地启oracle实例服务无法重启，协议适配器错误
今天遇到一位朋友的oracle实例服务无法起来,启动时报错: 分析的原因是可能早上服务器突然断电造成的,经过对tns的测试 经过我们讨论和诊断,最后诊断的处理方法是将实例删了重装,处理后服务恢复正常: ...
- HNUSTOJ-1689 送外卖(TSP问题)
1698: 送外卖 时间限制: 1 Sec 内存限制: 128 MB 提交: 115 解决: 24 [提交][状态][讨论版] 题目描述 在美团和饿了么大行其道的今天,囊中羞涩的小周和小美,也随大 ...
- 【推荐系统】知乎live入门5.常用技能与日常工作
参考链接 [推荐系统]知乎live入门 目录 1. 实习与求职 2. 推荐算法职责 3. 解构算法 4. 参考资料 5. 其他强关联岗位 6. 工作模型和日常工作 7. 2017年相关论文 8. 找工 ...
- CogniViewPDF2XL——将PDF表格转化为Excell表的软件
1. 下载官网地址:http://www.cogniview.com/download 2. 安装完后的样子
- Storm简介——实时流式计算介绍
概念 实时流式计算: 大数据环境下,流式数据将作为一种新型的数据类型,这种数据具有连续性.无限性和瞬时性.是实时数据处理所面向的数据类型,对这种流式数据的实时计算就是实时流式计算. 特征 实时流式计算 ...