最近公司做項目需要實現一個功能，在網頁富文本編輯器中實現粘貼Word圖文的功能。
我們在網站中使用的Web編輯器比較多，都是根據用戶需求來選擇的。目前還沒有固定哪一個編輯器
有時候用的是UEditor,有時候用的CKEditor,KindEditor,TinyMCE。
在網上查了很多資料，UEditor和其它的Web編輯器（富文本編輯器）在Chrome中可以支持單張圖片粘貼。但是我們的用戶需要處理的是Word中的圖片和文字，一般情況下Word中的圖片可能有十幾張。有時候有幾十張。特別是用戶發一些教程或者使用說明類的文檔時圖片都是大幾十張的。
在網上找到說UEditor支持word粘貼，試了一下，只支持一張圖片的粘貼。多張圖片粘貼還需要用戶自已手動選擇。也就是說如果用戶粘貼的Word中包含20張圖片的話，那么用戶就需要手動選擇20次，這種操作用戶是不可能接受的。
網上找了很久，大部分都有一些不成熟的問題，皇天不負有心人終於讓我找到了一個成熟的項目。
1、前端引用代碼
<!DOCTYPEhtml PUBLIC "-//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>
<metahttp-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>編輯器完整版實例-1.2.6.0</title>
<scripttype="text/javascript" src="ueditor.config.js" charset="utf-8"></script>
<scripttype="text/javascript" src="ueditor.all.js" charset="utf-8"></script>
<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/WordPaster.js" charset="utf-8"></script>
<scripttype="text/javascript" src="WordPaster/js/skygqbox.js" charset="utf-8"></script>
</head>
<body>
<textareaname="后台取值的key"id="myEditor">這里寫你的初始化內容</textarea>
<scripttype="text/javascript">
var pasterMgr = new WordPasterManager();
pasterMgr.Config["PostUrl"] = "http://localhost:81/WordPaster2/WordPasterUEditor1x/php/upload.php"
pasterMgr.Load();//加載控件
UE.getEditor('myEditor',{onready:function(){//創建一個編輯器實例
pasterMgr.SetEditor(this);
}});
</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.接收上傳的圖片並保存在服務端
<?php
ob_start();
//201201/10
$timeDir = date("Ym")."/".date("d");
$uploadDir = dirname(__FILE__).'/upload/'.$timeDir;
$curDomain = "http://".$_SERVER["HTTP_HOST"]."/";
//相對路徑 http://www.ncmem.com/upload/2012-1-10/
$relatPath = $curDomain ."WordPaster2/WordPasterUEditor1x/php/upload/" . $timeDir . "/";
//自動創建目錄。upload/2012-1-10
if(!is_dir($uploadDir))
{
mkdir($uploadDir,0777,true);
}
//如果PHP頁面為UTF-8編碼，請使用urldecode解碼文件名稱
//$fileName = urldecode($_FILES['postedFile']['name']);
//如果PHP頁面為GB2312編碼，則可直接讀取文件名稱
$fileName = $_FILES['file']['name'];
$tmpName = $_FILES['file']['tmp_name'];
//取文件擴展名jpg,gif,bmp,png
$path_parts = pathinfo($fileName);
$ext = $path_parts["extension"];
$ext = strtolower($ext);//jpg,png,gif,bmp
//只允許上傳圖片類型的文件
if($ext == "jpg"
|| $ext == "jpeg"
|| $ext == "png"
|| $ext == "gif"
|| $ext == "bmp")
{
//年_月_日_時分秒毫秒.jpg
$saveFileName = $fileName;
//xxx/2011_05_05_091250000.jpg
$savePath = $uploadDir . "/" . $saveFileName;
//另存為新文件名稱
if (!move_uploaded_file($tmpName,$savePath))
{
exit('upload error!' . "文件名稱：" .$fileName . "保存路徑：" . $savePath);
}
}
//輸出圖片路徑
//$_SERVER['HTTP_HOST'] localhost:81
//$_SERVER['REQUEST_URI'] /FCKEditor2.4.6.1/php/test.php
$reqPath = str_replace("upload.php","",$_SERVER['REQUEST_URI']);
echo $relatPath . $saveFileName;
header('Content-type: text/html; charset=utf-8');
header('Content-Length: ' . ob_get_length());
?>
前端效果：
接下來就看一下具體操作吧
1、打開工程：
對於文檔的上傳我們需要知道這個項目的邏輯是否符合我們的構造。
運行：
嘗試使用文檔復制后粘貼進來：
圖片上傳進度
通過粘貼后，文檔以及圖片被粘貼進來了，看看html代碼是否如我們的預期：
看來這個工程完全符合我們的預期，圖片全部使用img標簽統一。傳輸進度條的效果超出了我的意料。
來看看我們的文檔圖片被放置在哪了：
地址：D:\wamp64\www\WordPasterCKEditor4x\php\upload\201904\16
圖片被統一放置在文件夾。
由此看來這個項目的實際效果大大超出了我的意料了，帶入工程后完美的優化了工程項目
工程目錄截圖：
詳細介紹：http://blog.ncmem.com/wordpress/2019/08/12/ueditor批量上傳word圖片/