CSDN粘贴word图片且图片文件自动上传功能

最新推荐文章于 2023-07-13 11:16:11 发布
最新推荐文章于 2023-07-13 11:16:11 发布
阅读量191 收藏
点赞数
分类专栏： word图片一键粘贴 文章标签： word javascript html
原文链接：https://www.cnblogs.com/zyzzz/p/17197629.html
版权

在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题，于是各种网上扒拉，终于找到解决方案，在这里感谢一下知乎中众大神以及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中的所有图片，使用起来非常的方便，有需要的朋友可以直接下载

视频演示：

Word一键粘贴(导入)插件-Word图文一键粘贴功能演示

详细思路及源码

示例下载：

wordpaster-php-ckeditor4x，wordpaster-jsp-ckeditor4x，wordpaster-asp.net-ckeditor4x，wordpaster-asp-ckeditor4x，wordpaster-vue-ckeditor5

Mr_Zang666
关注
专栏目录
自动上传本地图片和word图片(word图片需使用从word粘贴功能)
bocaimomo的专栏
04-08 4369
http://n.dvbbs.net/topic-1335208.aspxhttp://bbs.kycms.com/showtopic-3145-1.html CSharp_ds 复制word我们的编辑器，然后你查看源代码，会看到然后你手动把 的方式，我们的远程存图功能就能自动把临时文件夹里的东西拷贝进系统的。 但是这个问题是只能在服务器上添加内容才能实现，因为这里的[url
TinyMCE粘贴word图片且图片文件自动上传功能
Mr_Zang666的博客
03-15 2243
3.基础配置 powerpaste_allow_local_images: true, //powerpaste允许黏贴 powerpaste_word_import: "clean", // 是否保留word粘贴样式 clean | merge （具体可查看官方文档）powerpaste_word_import: "clean", //powerpaste黏贴的样式获取方式。skin_url: "/static/skins/ui/oxide", // tinymce UI引入。
图片上传插件
01-14
简单的PHP图片上传插件 包括HTML JS 只需要将文件放入对应的模板，换上服务端路径即可
csdn的博客上传word图片
iblessu的专栏
06-20 776
<br />    csdn的博客上传word图片，这个问题困扰我很久，我都想换一个网址写技术博客了。不能传图片太麻烦了。<br />    今天终于在自己的探索下，研究出了一个比较麻烦的方法。虽然麻烦但毕竟可以上传word中图片了。<br />    方法：<br />    1.  导出word中的图片：<br />     在自己写好的word中，点击另存为。选择网页存储。这样就产生出一个文件夹，包含所有word中的图片。<br />     2. 将图片加到博客中。<br />     在空白处，点
Word图片上传控件(x64)发布-Xproer.WordPaster64
Jaylon Wang的专栏
09-19 6279
Word图片上传控件(x64)发布-Xproer.WordPaster64   官方网站：http://www.ncmem.com/ 产品首页：http://www.ncmem.com/webplug/imagepaster/index.aspx 在线演示-CKEditor3.x：http://www.ncmem.com/products/word-imagepaster
ckeditor粘贴word图片且图片文件自动上传插件
yjjatqihc的博客
11-29 126
Chrome+IE默认支持粘贴剪切板中的图片，但是我要发布的文章存在word里面，图片多达数十张，我总不能一张一张复制吧？ Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能。但是无法处理多张图片。而且转换成BASE64后是作为内容一起提交给服务器，不能够将图片单独保存在另外一台服务器中。如果需要单独保存则需要自已进行处理。比较麻烦。我希望打开Word或者WPS文档后，复制内容然后直接粘贴到富文本编辑器中，编辑器自动将图片批量上传到服务器中，无论文档中有多少张图片，编辑器都全部自动上传，不
vue使用tinymce 图文粘贴 图片大小 自动上传到本地服务
fosakenEE的博客
12-04 2091
tinymce基本的图片上传和文本已经很多人写过了，这里放一个中文文档 TinyMCE中文文档中文手册http://tinymce.ax-z.cn/ 项目中遇到需求能够让粘贴进来的图片上传到我们自己的服务器上，而不是单纯的引用一个连接，还有一个问题是同时粘贴进来的图文生成的图片标签是没有宽度和高度的，以下是解决方案。 单纯需要单图片复制自动上传的话只需要加一个配置 配置在tynemce.init({})里 paste_data_images: true...
ueditor粘贴word图片无法显示的问题
Mr_Zang666的博客
06-25 723
1.4.2之后官方并没有做功能的改动，1.4.2在word复制这块没有bug，其他版本会出现手动无法转存的情况 本文使用的后台是Java。前端为Jsp（前端都一样，后台如果语言不通得自己做 Base64编码解码） 因为公司业务需要支持IE8 ，网上其实有很多富文本框，效果都很好。 例如www.wangEditor.com 但试了一圈都不支持IE8 。 所以回到Ueditor，由于官方没有维护，新的neuditor 也不知道什么时候能支持word自动转存，只能自己想办法。 如果没有必要，不建议使用.
vue项目中的Tinymce富文本编辑器如何从word中粘贴图片上传到七牛云？
伊娃的博客
10-25 1521
Tinymce富文本编辑器粘贴图片时需要上传到自己的空间中才能被打开。 一、首先需要安装引入七牛云 npm install qiniu-js var qiniu = require('qiniu-js') // or import * as qiniu from 'qiniu-js' 二、同时引入客户端生成的token import {qiniuTokenCreate} from ...
Word图片上传控件开发文档
11-21
1. 概述 对于大多数用户来说，将Word中的图片上传到Web服务器来说是一件非常不方便的事情，许多情况下用户甚至需要手动将一张张图片上传到Web服务器中，这些重复操作将会浪费用户的许多时间。 现在新颖网络发布了Word图片上传控件，借助于这个控件可以帮助用户解决一张张上传Word图片的问题。特别是对于一些网站编辑人员来说，这个功能可以极大的提高他们的工作效率，减少重复工作。 新颖网络Word图片粘贴上传控件能够帮助用户将Word中的图片全部自动上传到Web服务器中。特别是当Word文档中的图片非常多时，这个功能能够极大的提高工作效果。在上传Word图片时控件不会破坏Word文档格式。不仅如此，新颖网络Word图片上传控件还可以自动上传剪帖板中图片，电脑硬盘中的图片。 对于开发人员来讲，新颖网络Word图片上传控件能够非常容易的整合到OA,新闻网站，博客或者其它WEB应用程序中，并为用户带来前所未有的体验。 2. 集成到现有系统中 2.1. 集成到系统中-FCKEditor2.x 说明：此教程适用于没有包含FCKEditor2.x编辑器的项目。 主要步骤： 1.上传文件 2.修改cab文件下载地址，修改classid号。 3.修改页面上传地址 1.上传文件 根据项目类型上传相应的文件夹：acsp,asp.net,jsp,php asp.net //请根据项目类型上传相应的文件夹，如果是PHP项目则上传php文件夹 ckeditor css js upload.gif WordPaster.cab 注意： 请不要解压WordPaster.cab，将完整的WordPaster.cab文件上传到服务器中，IE浏览器会自动安装CAB。CAB文件相当于是一个自动安装控件的脚本。 2.修改cab文件下载地址，修改classid号 打开js\ImagePaster.js。下面的代码标识了控件位置和版本号： function SetupWordPaster() { var acx = '<div style="display: none;">'; //图片粘贴上传控件 acx += ' <object id="Paster" classid="clsid:DC4A6931-3570-44b4-842D-C13EE637BBC1"'; acx += ' codebase="http://www.ncmem.com/products/word-imagepaster/WordPaster.cab#version=1,2,4,45165"'; acx += ' width="1" height="1" ></object>'; //Word图片上传控件 acx += ' <object id="Uploader" classid="clsid:26CFEDE7-789D-4077-B49D-C7F1D7150B93"'; acx += ' codebase="http://www.ncmem.com/products/word-imagepaster/WordPaster.cab#version=1,2,4,45165"'; acx += ' width="1" height="1" ></object>'; acx += '</div>'; //添加图片上传信息层 acx += '<div id="PasterMessager">'; acx += '<img alt="进度图标" src="../upload.gif" /><span>图片上传中...</span><span>10%</span></div>'; document.write(acx); } 注意： 当控件升级(版本号修改)或CAB文件位置改变，必须修改ImagePaster.js中的代码。否则用户的IE浏览器将无法正常加载控件。
word插件，图片处理专用
04-18
word插件，图片处理专用 试过就知道，很有用的
百度ueditor实现word图片自动转存
m673010624的博客
03-29 5642
官网地址http://ueditor.baidu.com Git 地址https://github.com/fex-team/ueditor 本文使用版本https://pan.baidu.com/s/1ntG3Tsl#list/path=%2F里选择1.4.2 1.4.2之后官方并没有做功能的改动，1.4.2在word复制这块没有bug，其他版本会出现手动无法转存的情况 参...
让富文本编辑器支持复制doc中多张图片直接粘贴上传
ftaomanman的博客
04-12 1071
公司做的项目要用到文本上传功能。 Chrome+IE默认支持粘贴剪切板中的图片，但是我要粘贴的文章存在word里面，图片多达数十张，我总不能一张一张复制吧 我希望打开文档doc直接复制粘贴到富文本编辑器，直接发布 那么Ueditor很不错，对于文本的上传功能可以说强大，点个赞！ 但是对于多个图片的上传还有一点缺陷，因为Ueditor本身不支持，粘贴后直接就是空白，这里面一定有原因。...
ckeditor粘贴word图片自动上传插件
最新发布
Mr_Zang666的博客
07-13 177
"Servers" :[{"url":"www.ncmem.com"},{"url":"www.xproerui.com"}]//内部服务器地址(不下载此地址中的图片)JPG/PNG/GIF/BMP，推荐使用JPG格式，防止出现大图片。, "PasteImageType" : "" //粘贴文件，剪帖板的图片格式，为空表示本地图片格式。, "PasteImgSrc" : "" //shape:优先使用源公式图片，img:使用word自动生成的图片。
ckeditor粘贴word图片且图片自动上传插件
yjjatqihc的博客
12-01 215
1.4.2之后官方并没有做功能的改动，1.4.2在word复制这块没有bug，其他版本会出现手动无法转存的情况 本文使用的后台是Java。前端为Jsp（前端都一样，后台如果语言不通得自己做 Base64编码解码） 因为公司业务需要支持IE8 ，网上其实有很多富文本框，效果都很好。 例如www.wangEditor.com 但试了一圈都不支持IE8 。 所以回到Ueditor，由于官方没有维护，新的neuditor 也不知道什么时候能支持word自动转存，只能自己想办法。 如果没有必要，不建议使用.
在csdn里面写入word里面编辑的样式
数据库天地
11-01 119
&lt;style&gt; &lt;!-- body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {margin:0; padding:0} html {color:#...
JavaScript实现CSDN广告图片轮换效果
"CSDN轮换广告图片轮换效果" 这篇内容涉及的是一个JavaScript框架，用于实现CSDN网站上的广告图片轮换效果。作者是meizz，创建于2005年02月27日，经过多次更新，版本日期至2006年08月31日。这个框架采用MIT许可证，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值