能貼上圖片的富文字編輯器
最近公司做專案需要實現一個功能，在網頁富文字編輯器中實現貼上Word圖文的功能。
我們在網站中使用的Web編輯器比較多，都是根據使用者需求來選擇的。目前還沒有固定哪一個編輯器
有時候用的是UEditor,有時候用的CKEditor,KindEditor,TinyMCE。
在網上查了很多資料，UEditor和其它的Web編輯器（富文字編輯器）在Chrome中可以支援單張圖片貼上。但是我們的使用者需要處理的是Word中的圖片和文字，一般情況下Word中的圖片可能有十幾張。有時候有幾十張。特別是使用者發一些教程或者使用說明類的文件時圖片都是大幾十張的。
在網上找到說UEditor支援word貼上，試了一下，只支援一張圖片的貼上。多張圖片貼上還需要使用者自已手動選擇。也就是說如果使用者貼上的Word中包含20張圖片的話，那麼使用者就需要手動選擇20次，這種操作使用者是不可能接受的。
網上找了很久，大部分都有一些不成熟的問題，皇天不負有心人終於讓我找到了一個成熟的專案。
1、前端引用程式碼
<!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>
<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"
<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">
varpasterMgr =newWordPasterManager();
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
圖片被統一放置在資料夾。
由此看來這個專案的實際效果大大超出了我的意料了，帶入工程後完美的優化了工程專案
工程目錄截圖：
控制元件包：
IE(x86)：http://t.cn/AiC6segS
IE(x64)：http://t.cn/AiCXv7ti
Chrome：http://t.cn/AiC6s86u
Firefox：http://t.cn/AiCXvMr5
示例下載：
FCKEditor2x：http://t.cn/AiCXvOpm
CKEditor3x：http://t.cn/AiCXvQHu
CKEditor4x：http://t.cn/AiCXvukn
CuteEditor6x：http://t.cn/AiCXveOn
KindEditor3x：http://t.cn/AiCXP7fG
KindEditor4x：http://t.cn/AiCXPLFu
TinyMCE3x：http://t.cn/AiCXP5RH
TinyMCE4x：http://t.cn/AiCXPx1O
UEditor1x：http://t.cn/AiCXPodH
xhEditor1x：http://t.cn/AiCXPOhL
HKwik5.0：http://t.cn/AiCXPHfA
WordPress3.7.1：http://t.cn/AiCXPmrk
Joomla3.4.7：http://t.cn/AiCXPgtA
Drupal 7.34：http://t.cn/AiCXhzBu