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

富文本编辑器直接从 word 中复制粘贴公式的更多相关文章

  1. 富文本编辑器实现从word中复制图片(外挂)

    1问题 基于web的富文本编辑器的功能普遍较弱,而word是公认的宇宙第一好用的文档编辑器,所以许多人都习惯先在word中编辑,然后再将内容粘到web富文本编辑器中. 但是,这种操作有一个问题:图片带 ...

  2. 现在有没有一种富文本编辑器能够直接从 word 中复制粘贴公式的？

    tinymce是很优秀的一款富文本编辑器,可以去官网下载.https://www.tiny.cloud 这里分享的是它官网的一个收费插件powerpaste的旧版本源码,但也不影响功能使用. http ...

  3. 百度富文本编辑器ueditor在jsp中的使用（ssm框架中的应用）

    折腾了一下午终于把百度富文本编辑器ueditor搞定了!   项目地址:https://github.com/724888/lightnote_new     首先我参考了一个ueditor的demo ...

  4. KindEditor富文本编辑器， 从客户端中检测到有潜在危险的 Request.Form 值

    在用富文本编辑器时经常会遇到的问题是asp.net报的”检测到有潜在危险的 Request.Form 值“一般的解法是在aspx页面   page  标签中加上 validaterequest='fa ...

  5. 百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明

    ====================================================================== [百度Web富文本编辑器ueditor在ASP.NET M ...

  6. vue集成百度UEditor富文本编辑器

    在前端开发的项目中.难免会遇到需要在页面上集成一个富文本编辑器.那么.如果你有这个需求.希望可以帮助到你 vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于是 ...

  7. JAVA 集成 Ueditor 百度富文本编辑器

    开发环境:一个简单的SpringMVC框架中,用百度富文本编辑器 ueditor 实现图片和文件的上传 官网地址:http://ueditor.baidu.com/website/ 需要使用到的2个文 ...

  8. ueditor富文本编辑器跨域上传图片解决办法

    在使用百度富文本编辑器上传图片的过程中,如果是有一台单独的图片服务器就需要将上传的图片放到图片服务器,比如在a.com的编辑器中上传图片,图片要保存到img.com,这就涉及到跨域上传图片,而在ued ...

  9. 百度umeditor富文本编辑器插件扩展

    富文本编辑器在WEB开发中经常用到,个人比较喜欢用百度出的ueditor这款,ueditor这款本身支持插件扩展的,但是ueditor的mini版本 umeditor 就没有那么方便了,不过找了很多资 ...

随机推荐

  1. Spring (3)框架

    Spring第三天笔记 今日内容 Spring的核心之一 -  AOP思想 (1) 代理模式- 动态代理 ① JDK的动态代理 (Java官方) ② CGLIB 第三方代理 (2) AOP思想在Spr ...

  2. asp.net core-14.JWT认证授权 生成 JWT Token

    源码下载 语言组织能力不好 ,看这个 视频 用visual studio code打开文件,运行dotnet watch run 之后在postman里面去访问 拿到Token后

  3. Shell重定向：2>&1

    Shell重定向:2>&1 0 是一个文件描述符,表示标准输入(stdin) 1 是一个文件描述符,表示标准输出(stdout) 2 是一个文件描述符,表示标准错误(stderr) 重定 ...

  4. （七）Redis之Keys的通用操作

    package myRedis01; import java.util.HashMap; import java.util.List; import java.util.Map; import jav ...

  5. （十）shiro之自定义Realm以及自定义Realm在web的应用demo

    数据库设计 pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http:/ ...

  6. Java BinarySearch

    Java BinarySearch /** * <html> * <body> * <P> Copyright 1994-2018 JasonInternation ...

  7. JSON序列化必看以及序列化工具类

    1.要序列化的类必须用 [DataContract] 特性标识   2.需要序列化的属性应用 [DataMember] 特性标识,没有该特性则表示不序列化该属性.类亦如此!   3.可以网络上找封装好 ...

  8. Vue绑定的table页面在Chrome浏览器左右抖动

    现象: 今天Chrome浏览器升级到最新版本(75.0.3770.100),突然发现之前vue页面只要绑定了el-table标签的,都在左右抖动,抖动得眼睛都花了,百度上找半天也没有遇到相同问题的人, ...

  9. C#使用Selenium网页自动化

    工作中很多时候经常需要网抓数据或者把数据填写到网站上,使用Selenium将其自动化是一种不错的选择.Selenium其实是一个用于Web应用程序测试的工具,测试你的应用程序看是否能够很好地工作在不同 ...

  10. luogu题解P1967货车运输--树链剖分

    题目链接 https://www.luogu.org/problemnew/show/P1967 分析 NOIp的一道裸题,直接在最大生成树上剖分取最小值一下就完事了,非常好写,常数也比较小,然而题解 ...