asp.net - 支援word上傳的富文字編輯器
如何做到 ueditor批量上傳word圖片？
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"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">
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);
vareditor = 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());
?>
效果展示：
在使用前需要配置一下，可以參考我寫的這篇文章：
討論群：223813913