富文本编辑器粘贴复制Word
公司做的項目需要用到粘貼Word功能。就是將word內容一鍵粘貼到網頁編輯器（在線富文本編輯器）中。Chrome+IE默認支持粘貼剪切板中的圖片，但是我要粘貼的文章存在word里面，圖片多達數十張，我總不能一張一張復制吧 ？
我希望打開文檔doc直接復制粘貼到富文本編輯器，直接發布?
在網上查了很多資料，UEditor和其它的Web編輯器（富文本編輯器）在Chrome中可以支持單張圖片粘貼。但是我們的用戶需要處理的是Word中的圖片和文字，一般情況下Word中的圖片可能有十幾張。有時候有幾十張。特別是用戶發一些教程或者使用說明類的文檔時圖片都是大幾十張的。
在網上找到說UEditor支持word粘貼，試了一下，只支持一張圖片的粘貼。多張圖片粘貼還需要用戶自已手動選擇。也就是說如果用戶粘貼的Word中包含20張圖片的話，那么用戶就需要手動選擇20次，這種操作用戶是不可能接受的。
網上找了很久，大部分都有一些不成熟的問題，皇天不負有心人終于讓我找到了一個成熟的項目。
?
1、前臺頁面引用代碼
<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="index.aspx.cs"Inherits="CKEditor353.index"?%><!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>WordPaster For CKEditor-3.x</title><linktype="text/css"rel="Stylesheet"href="WordPaster/css/WordPaster.css"/><linktype="text/css"rel="Stylesheet"href="WordPaster/js/skygqbox.css"/><scripttype="text/javascript"src="WordPaster/js/json2.min.js"charset="utf-8"></script><scripttype="text/javascript"src="WordPaster/js/jquery-1.4.min.js"charset="utf-8"></script><scripttype="text/javascript"src="WordPaster/js/w.edge.js"charset="utf-8"></script><scripttype="text/javascript"src="WordPaster/js/w.app.js"charset="utf-8"></script><scripttype="text/javascript"src="WordPaster/js/w.file.js"charset="utf-8"></script><scripttype="text/javascript"src="WordPaster/js/WordPaster.js"charset="utf-8"></script><scripttype="text/javascript"src="WordPaster/js/skygqbox.js"charset="utf-8"></script><scripttype="text/javascript"src="ckeditor/ckeditor.js"></script></head><body><textareaid="editor1"name="editor1"><imgsrc="http://mat1.gtimg.com/www/images/qq2012/qqlogo_1x.png"width="134"height="44"/></textarea><scripttype="text/javascript">var?pasterMgr =?new?WordPasterManager();pasterMgr.Config["PostUrl"] =?"http://localhost:2797/asp.net/upload.aspx";//這里填網站的上傳路徑pasterMgr.Config["Cookie"] =?'ASP.NET_SessionId=<%=Session.SessionID%>';pasterMgr.Load();?//加載控件CKEDITOR.on('instanceReady',?function?(evt){pasterMgr.SetEditor(evt.editor);});//自定義快捷鍵CKEDITOR.config.keystrokes = [[CKEDITOR.CTRL + 86/*V*/,?'imagepaster']];//加載CKEditor編輯器CKEDITOR.replace('editor1');</script></body></html>請求
文件上傳的默認請求是一個文件，作為具有“upload”字段的表單數據。
響應：文件已成功上傳
當文件成功上傳時的JSON響應：
uploaded-?設置為1。
fileName -?上傳文件的名稱。
url -?上傳文件的URL。
響應：文件無法上傳
uploaded-?設置為0。
error.message -?要顯示給用戶的錯誤消息。
2、粘貼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.接收上傳的圖片并保存在服務端
using?System;using?System.Collections.Generic;using?System.Web;using?System.Web.UI;using?System.Web.UI.WebControls;using?System.IO;using?System.Text;namespace?WordImages.asp.net{publicpartialclassupload?: System.Web.UI.Page{protectedvoid?Page_Load(object?sender, EventArgs e){string?fname = Request.Form["UserName"];int?len = Request.ContentLength;System.Diagnostics.Debug.Write(Session["ck"]);if?(Request.Files.Count > 0){DateTime timeNow = DateTime.Now;string?uploadPath =?"/upload/"?+ timeNow.ToString("yyyyMM") +?"/"?+ timeNow.ToString("dd") +?"/";string?folder = Server.MapPath(uploadPath);//自動創建目錄if?(!Directory.Exists(folder)){Directory.CreateDirectory(folder);}HttpPostedFile file = Request.Files.Get(0);string?ext = Path.GetExtension(file.FileName).ToLower();//只支持圖片上傳if?(ext ==?".jpg"|| ext ==?".jpeg"|| ext ==?".png"|| ext ==?".gif"|| ext ==?".bmp"|| ext ==?".webp"){string?filePath = Path.Combine(folder, file.FileName);//if(!Directory.Exists(filePath)) file.SaveAs(filePath);Response.Write(uploadPath + file.FileName);}}}}}?
HTTP協議
請求頭數據：
?
請求表單數據：
?
前端效果：
接下來就看一下具體操作吧
1、打開工程：
對于文檔的上傳我們需要知道這個項目的邏輯是否符合我們的構造。
運行：
嘗試使用文檔復制后粘貼進來：
圖片上傳進度
通過粘貼后，文檔以及圖片被粘貼進來了，看看html代碼是否如我們的預期：
看來這個工程完全符合我們的預期，圖片全部使用img標簽統一。傳輸進度條的效果超出了我的意料。
來看看我們的文檔圖片被放置在哪了：
地址：D:\wamp64\www\WordPasterCKEditor4x\php\upload\201904\16
圖片被統一放置在文件夾。
由此看來這個項目的實際效果大大超出了我的意料了，帶入工程后完美的優化了工程項目
工程目錄截圖：
?
控件包：
IE(x86)：http://t.cn/AiC6segS
IE(x64)：http://t.cn/AiCXv7ti
Chrome：http://t.cn/AiC6s86u
Firefox：http://t.cn/AiCXvMr5
exe：http://t.cn/AiCXvoVl
?
示例下載：
FCKEditor2x：http://t.cn/AiCaglBC
CKEditor3x：http://t.cn/AiCagROE
CKEditor4x：http://t.cn/AiCagum4
CuteEditor6x：http://t.cn/AiCasJmE
KindEditor3x：http://t.cn/AiCasa2h
KindEditor4x：http://t.cn/AiCasoFp
TinyMCE3x：http://t.cn/AiCasN26
TinyMCE4x：http://t.cn/AiCasOiM
UEditor1x：http://t.cn/AiCasl3t
xhEditor1x：http://t.cn/AiCasTa1
eWebEditor：http://t.cn/AiCas8aK
總結
以上是生活随笔為你收集整理的富文本编辑器粘贴复制Word的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python读取word内容复制粘贴,P
- 下一篇： Word2007 无法复制粘贴的原因以及