最近公司做项目需要实现一个功能,在网页富文本编辑器中实现粘贴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

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

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

工程目录截图:

详细参考:

word粘贴图片到ekitor的更多相关文章

  1. word粘贴图片到ckeitor

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

  2. ckeditor实现WORD粘贴图片自动上传,jsp应用

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

  3. WORD粘贴图片+DEDE

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

  4. ckeditor从word粘贴图片

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

  5. Fckeditor实现WORD粘贴图片自动上传

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

  6. ckeditor实现WORD粘贴图片自动上传

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

  7. 关于word粘贴图片无法显示的原因

    今天在进行word文档粘贴图片编辑操作的时候,老是无法完整的显示图片.或者干脆就不显示图片,以为是qq截图的图片格式无法粘贴到word文档里面,用Photoshop更改图片的格式仍然无法显示(将png ...

  8. word粘贴图片+的editor

    公司做的项目需要用到文本上传功能. Chrome+IE默认支持粘贴剪切板中的图片,但是我要粘贴的文章存在word里面,图片多达数十张,我总不能一张一张复制吧? 我希望打开文档doc直接复制粘贴到富文本 ...

  9. 自动上传本地图片和word图片(word图片需使用从word粘贴功能)

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

随机推荐

  1. CentOS7下使用ELK搭建日志集中分析平台

    应用场景: ELK实际上是三个工具的集合,ElasticSearch + Logstash + Kibana,这三个工具组合形成了一套实用.易用的监控架构,很多公司利用它来搭建可视化的海量日志分析平台 ...

  2. QObject::connect可以对不继承QObject的类也使用信号槽

    #include <QCoreApplication>#include <QDebug>#include <QObject>#include <QThread ...

  3. Java多线程(一):线程与进程

    1.线程和进程 1.1 进程 进程是操作系统的概念,我们运行的一个TIM.exe就是一个进程. 进程(Process)是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位 ...

  4. Unable to load the specified metadata resource

    本地运行都正常,就是发布到服务器上不行,查找了一些文章,都没解决我的问题,后来发现是路径不对和文件缺失. 原来的配置文件中是这样的: <add name="TRidentityEnti ...

  5. 3 java 笔记

    1 垃圾回收机制能够很好地提高编程效率 2 垃圾回机制保护程序的完成性 3 面向对象的三种基本特征:继承,封装,多态 4 面向对象的方式:OOA(面向对象的分析),OOD(面向对象的设计)和OOP(面 ...

  6. shell与其他语言不同点

    1.定义变量时,变量名不加美元符号($,PHP语言中变量需要),如: your_name="w3cschool.cn" 注意,变量名和等号之间不能有空格,这可能和你熟悉的所有编程语 ...

  7. 记录--js中出现的数组排序问题

    这是今天在写vue项目时发生的一个小问题,在此记录一下,方便自己的回顾.项目是前后端分离的,前台主要使用了vue-cli3.0 + mintui,是一个移动端的web app包括了后台发布管理的一些功 ...

  8. dart 函数练习

    import 'dart:convert'; import 'dart:html'; void main() { _getIPAddress() { final url = 'https://http ...

  9. 用qpython3写一个发送短信的程序

    用qpython3写一个最简单的发送短信的程序 用qpython3写一个最简单的发送短信的程序到目前为止并没有多少手机应用是用python开发的,不过qpython可以作为一个不错的玩具推荐给大家来玩 ...

  10. SQL语句复习【专题二】

    SQL语句复习[专题二] 单行函数(日期.数学.字符串.通用函数.转换函数)多行函数.分组函数.多行数据计算一个结果.一共5个.sum(),avg(),max(),min(),count()分组函数  ...