富文本编辑器实现一键粘帖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();
}
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中的所有图片,使用起来非常的方便,有需要的朋友可以直接下载使用
详细思路及源码
示例下载:
wordpaster-vue3-cli-ueditor1.5,wordpaster-vue-ueditor1.5,wordpaster-asp.net-ueditor1.5x,wordpaster-php-ueditor1x,wordpaster-jsp-ueditor1x
富文本编辑器实现一键粘帖word图片相关推荐
- fastnest怎么一键排版_富文本编辑器的一键排版功能
在做CMS系统的时候,用户常常会从word粘贴一些东西到编辑器中,早起的富文本编辑器也都提供了去除word格式的功能(尽管有时候比较难用),甚至有时候用户要求打开一个本地的word文件的时候系统能够直 ...
- 富文本编辑器的一键排版功能
在做CMS系统的时候,用户常常会从word粘贴一些东西到编辑器中,早起的富文本编辑器也都提供了去除word格式的功能(尽管有时候比较难用),甚至有时候用户要求打开一个本地的word文件的时候系统能够直 ...
- word读入富文本编辑器,编辑后导出下载word日常总结
基本思路就是: 使用poi读入word文档, 读入内容转为html内容,(直接读入text仅仅只是文本没有格式) 将html内容给富文本编辑器显示(这样的目的是带格式). 下边贴代码: poi读入wo ...
- 基于summernote的富文本编辑器,粘贴时去除word格式
在使用summernote的富文本编辑器,在粘贴word内容时,会发现代码中有很多无效的代码.通过js处理,可以去掉很多无用的代码. 处理前,粘贴后的代码类似这样: <p><!--[ ...
- 富文本编辑器(html格式)导出为word(vue实现)
纯Vue实现将多个富文本编辑器内容[html格式]统一导出为word 一.vue需要导入的包 二.制作html的格式 1. 为了方便,先用word制作成对应的导出样式,然后通过word导出为html格 ...
- 富文本编辑器Ueditor实战(二)-图片上传
本文接前文富文本编辑器Ueditor实战(一),前文留了一个问题,就是图片上传功能无法使用,报后台配置错误的问题.那么应该如何配置图片上传功能呢?本文将使用jsp+tomcat的方式进行说明如何动态配 ...
- *使用quill富文本编辑器的插件,自定义formData图片上传
官网地址:https://quilljs.com 项目需求:自带的上传图片是base64,直接入库的话,请求头太长,导致网页十分十分的卡,所以才改用formData自定义上传(改完之后,相当于覆盖了他 ...
- PHP防止富文本编辑器让服务器产生过多垃圾图片
PHP防止服务器富文本提交产生过多垃圾图片 1.前言 做一个项目,然后用到了,富文本编辑器,比如: 这种富文本编辑器可以完成由用户来生成,图文并茂的内容,有点像CSDN的写博客部分.然后出现了问题: ...
- 富文本编辑器实现一键复制word图片
由于工作需要必须将word文档内容粘贴到编辑器中使用 但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直 ...
最新文章
- Linux实战案例(5)关闭Centos的防火墙
- 转挣扎的菜鸟 - 当OD不能装载也不能附加程序时
- vue移动端下拉切换页面_Vue实现移动端页面切换效果
- SocketAPI,CAsyncSocket,CSocket内幕及其用法
- r语言数据变量分段_R数据分析:用R语言做meta分析
- 企业所得税汇算清缴系统服务器,【图解】汇算清缴风险控制本周五发布,操作流程这里全有!...
- find 按文件修改时间查找文件
- 云栖大会极客智造局亮点抢先看
- php 弹窗代码大全,PHP_asp.net弹出窗口代码大全,//关闭,父窗口弹出对话框,子窗 - phpStudy...
- 本地缓存之Guava简单使用
- 手动实现apply、call、bind
- onenote组织知识体系_我们的家人教给我们有关组织生活的知识
- c/c++中的引用变量
- 如何引用Icommand并实现接口
- Mbs Framework 简介
- 百度离线地图开发API
- 闲置安卓手机改造linux服务器
- (转载)NPOI使用手册,实践发现使用2.2版本的库需要稍作调整
- Unity游戏开发前置知识
- 无线点菜宝服务器,餐饮业电子产品无线点菜宝