最近公司做项目需要实现一个功能,在网页富文本编辑器中实现粘贴Word图文的功能。

我们在网站中使用的Web编辑器比较多,都是根据用户需求来选择的。目前还没有固定哪一个编辑器

有时候用的是UEditor,有时候用的CKEditor,KindEditor,TinyMCE。

在网上查了很多资料,UEditor和其它的Web编辑器(富文本编辑器)在Chrome中可以支持单张图片粘贴。但是我们的用户需要处理的是Word中的图片和文字,一般情况下Word中的图片可能有十几张。有时候有几十张。特别是用户发一些教程或者使用说明类的文档时图片都是大几十张的。

在网上找到说UEditor支持word粘贴,试了一下,只支持一张图片的粘贴。多张图片粘贴还需要用户自已手动选择。也就是说如果用户粘贴的Word中包含20张图片的话,那么用户就需要手动选择20次,这种操作用户是不可能接受的。

网上找了很久,大部分都有一些不成熟的问题,皇天不负有心人终于让我找到了一个成熟的项目。

1、前端引用代码

、粘贴word里面的图片路径是fill://D 这种格式 我理解这种是非浏览器安全的 许多浏览器也不支持

目前项目是用了一种变通的方式:

先把word上传到后台 、poi解析、存储图片 、转换html、替换图片、放到富文本框里显示

(富文本显示有个坑:没找到直接给富文本赋值的方法 要先销毁 记录下

success : function(data) {

$('#content').attr('value',data.imagePath);

var editor = CKEDITOR.instances["content"]; //你的编辑器的"name"属性的值

if (editor) {

editor.destroy(true);//销毁编辑器

}

CKEDITOR.replace('content'); //替换编辑器,editorID为ckeditor的"id"属性的值

$("#content").val(result);    //对editor赋值

//CKEDITOR.instances.contentCkeditor.setData($("#content").text());

}

3.接收上传的图片并保存在服务端

、打开工程:

对于文档的上传我们需要知道这个项目的逻辑是否符合我们的构造。

运行:

尝试使用文档复制后粘贴进来:

图片上传进度

通过粘贴后,文档以及图片被粘贴进来了,看看html代码是否如我们的预期:

看来这个工程完全符合我们的预期,图片全部使用img标签统一。传输进度条的效果超出了我的意料。

来看看我们的文档图片被放置在哪了:

地址:D:\wamp64\www\WordPasterCKEditor4x\php\upload\201904\16

图片被统一放置在文件夹。

由此看来这个项目的实际效果大大超出了我的意料了,带入工程后完美的优化了工程项目

工程目录截图:

详细配置信息可以参考这篇文章:http://blog.ncmem.com/wordpress/2019/08/07/ueditor%E5%AE%9E%E7%8E%B0word%E5%9B%BE%E7%89%87%E8%87%AA%E5%8A%A8%E4%B8%8A%E4%BC%A0/

ueditor+word图片上传的更多相关文章

  1. uEditor独立图片上传

    项目中.上传图片,非常希望有一款比较兼容的查件. 网上找了一些,图片上传立刻显示的js代码,还有uploadify.都会碰到这样那样的不兼容和其它头疼的问题. 后来想,干脆就用php的上传类最干脆.但 ...

  2. 在SAE上使用Ueditor的图片上传功能

    SAE上是没有文件夹读写权限的,所以要在SAE使用Ueditor的图片上传功能须要借助SAE的Storage服务. 一.开通Storage服务 在SAE控制台开通Storage服务,并新增一个doma ...

  3. php+ ueditor word粘贴上传

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

  4. java+Word图片上传控件

    这种方法是servlet,编写好在web.xml里配置servlet-class和servlet-mapping即可使用 后台(服务端)java服务代码:(上传至ROOT/lqxcPics文件夹下) ...

  5. 对百度的UEditor多图片上传的一些补充

    我已经写了一篇文章关于百度的UEditor提取多图片上传模块.如果还没有看过,请点击以下链接查看 http://www.cnblogs.com/luke1006/p/3719029.html 出差了两 ...

  6. 单独调用Ueditor的图片上传功能

    <!DOCTYPE html> <html> <head> <title></title> <script src="/sc ...

  7. asp.net 百度编辑器 UEditor 上传图片 图片上传配置 编辑器配置 网络连接错误,请检查配置后重试

    1.配置ueditor/editor_config.js文件,将 //图片上传配置区 ,imageUrl:URL+"net/imageUp.ashx" //图片上传提交地址 ,im ...

  8. UEditor使用------图片上传与springMVC集成 完整实例

    UEditor是一个很强大的在线编辑软件 ,首先讲一下 基本的配置使用 ,如果已经会的同学可以直接跳过此节 ,今天篇文章重点说图片上传; 一  富文本的初始化使用: 1 首先将UEditor从官网下载 ...

  9. 百度ueditor的图片上传,前后端交互使用

    百度ueditor的使用 一个文本编辑器,看了网上很多文档写的很乱,这里拾人牙慧,整理下怎么使用. 这个东西如果不涉及到图片附件上传,其实很简单,就是几个前端文件,直接引用,然后配置下ueditor. ...

随机推荐

  1. 机器学习笔记----四大降维方法之PCA(内带python及matlab实现)

    大家看了之后,可以点一波关注或者推荐一下,以后我也会尽心尽力地写出好的文章和大家分享. 本文先导:在我们平时看NBA的时候,可能我们只关心球员是否能把球打进,而不太关心这个球的颜色,品牌,只要有3D效 ...

  2. HTML5扩展之微数据与丰富网页摘要

    一.微数据是? 一个页面的内容,例如人物.事件或评论不仅要给用户看,还要让机器可识别.而目前机器智能程度有限,要让其知会特定内容含义,我们需要使用规定的标签.属性名以及特定用法等.举个简单例子,我们使 ...

  3. 【Java Saves!】Session 5:计算机器之三--二指禅

    人有十指.人类掰着手指头,发明出了0.1.2-9这十个数字.后来手指头不够用了,便发明出数位(个.十.百.千-)和满十进一的规则,称为十进制. 而计算机靠两个手指头工作.在计算机内部,只有0和1两个数 ...

  4. hibernate的like用法(用占位符解决)

    原本我的写法:Query repeatClientQuery=querysession.createQuery("from ClientInfo as a " +"whe ...

  5. php或js判断网站访问者来自手机或者pc

    php或js判断网站访问者来自手机或者pc机 2013年9月26日,在弄wtuonline的时候为了区分用户是来自手机版浏览器还是pc,针对不同平台选择不同的网站版本,最终总结如下:         ...

  6. C语言动态内存管理

    1-概述 动态存储管理的基本问题是:系统如何按请求分配内存,如何回收内存再利用.提出请求的用户可能是系统的一个作业,也可能是程序中的一个变量. 空闲块 未曾分配的地址连续的内存区称为“空闲块”. 占用 ...

  7. Kafka笔记--常用指令(删除topic)

    删除topic 首先需要设置server.properties,最后一行添加 delete.topic.enable=true 然后运行> ./kafka-topics.sh --zookeep ...

  8. robots.txt网站爬虫文件设置

    目录: 什么是robots.txt robots.txt使用误区 robots.txt使用技巧 什么是robots.txt? robots.txt是搜索引擎中访问网站的时候要查看的第一个文件.Robo ...

  9. Vue bus的使用(兄弟|非父子组件传值)--&gt;可以使用一个空的Vue实例作为中央事件总线new Vue()

    1.在main.js中注册全局的bus  Vue.prototype.bus=new Vue(); 2.在组建中使用 子组建使用:this.bus.$emit('自定义事件名',data) metho ...

  10. 20165223 《JAVA程序设计》第六周学习总结

    教材学习内容总结 第八章-常用实用类-要点 基础:String类 重点:StringTokenizer类,Scanner类 难点:Class类与Console类,Pattern类与Match类 其他特 ...