php+ tinymce粘贴word
最近公司做項(xiàng)目需要實(shí)現(xiàn)一個(gè)功能，在網(wǎng)頁(yè)富文本編輯器中實(shí)現(xiàn)粘貼Word圖文的功能。
我們?cè)诰W(wǎng)站中使用的Web編輯器比較多，都是根據(jù)用戶需求來選擇的。目前還沒有固定哪一個(gè)編輯器
有時(shí)候用的是UEditor,有時(shí)候用的CKEditor,KindEditor,TinyMCE。
在網(wǎng)上查了很多資料，UEditor和其它的Web編輯器（富文本編輯器）在Chrome中可以支持單張圖片粘貼。但是我們的用戶需要處理的是Word中的圖片和文字，一般情況下Word中的圖片可能有十幾張。有時(shí)候有幾十張。特別是用戶發(fā)一些教程或者使用說明類的文檔時(shí)圖片都是大幾十張的。
在網(wǎng)上找到說UEditor支持word粘貼，試了一下，只支持一張圖片的粘貼。多張圖片粘貼還需要用戶自已手動(dòng)選擇。也就是說如果用戶粘貼的Word中包含20張圖片的話，那么用戶就需要手動(dòng)選擇20次，這種操作用戶是不可能接受的。
網(wǎng)上找了很久，大部分都有一些不成熟的問題，皇天不負(fù)有心人終于讓我找到了一個(gè)成熟的項(xiàng)目。
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>編輯器完整版實(shí)例-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="后臺(tái)取值的key"id="myEditor">這里寫你的初始化內(nèi)容</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(){//創(chuàng)建一個(gè)編輯器實(shí)例
??????????????pasterMgr.SetEditor(this);
??????????}});
????</script>
</body>
</html>
請(qǐng)求
文件上傳的默認(rèn)請(qǐng)求是一個(gè)文件，作為具有“upload”字段的表單數(shù)據(jù)。
響應(yīng)：文件已成功上傳
當(dāng)文件成功上傳時(shí)的JSON響應(yīng)：
uploaded-?設(shè)置為1。
fileName -?上傳文件的名稱。
url -?上傳文件的URL。
響應(yīng)：文件無法上傳
uploaded-?設(shè)置為0。
error.message -?要顯示給用戶的錯(cuò)誤消息。
2、粘貼word里面的圖片路徑是fill://D 這種格式 我理解這種是非瀏覽器安全的 許多瀏覽器也不支持
目前項(xiàng)目是用了一種變通的方式：
先把word上傳到后臺(tái) 、poi解析、存儲(chǔ)圖片 、轉(zhuǎn)換html、替換圖片、放到富文本框里顯示
（富文本顯示有個(gè)坑：沒找到直接給富文本賦值的方法 要先銷毀 記錄下
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);????//對(duì)editor賦值
?????//CKEDITOR.instances.contentCkeditor.setData($("#content").text());
?}
3.接收上傳的圖片并保存在服務(wù)端
<?php
ob_start();
//201201/10
$timeDir =?date("Ym")."/".date("d");
$uploadDir =?dirname(__FILE__).'/upload/'.$timeDir;
$curDomain =?"http://".$_SERVER["HTTP_HOST"]."/";
//相對(duì)路徑 http://www.ncmem.com/upload/2012-1-10/
$relatPath = $curDomain ."WordPaster2/WordPasterUEditor1x/php/upload/"?. $timeDir .?"/";
?
//自動(dòng)創(chuàng)建目錄。upload/2012-1-10
if(!is_dir($uploadDir))
{
????mkdir($uploadDir,0777,true);
}
?
//如果PHP頁(yè)面為UTF-8編碼，請(qǐng)使用urldecode解碼文件名稱
//$fileName = urldecode($_FILES['postedFile']['name']);
//如果PHP頁(yè)面為GB2312編碼，則可直接讀取文件名稱
$fileName =?$_FILES['file']['name'];
$tmpName =?$_FILES['file']['tmp_name'];
?
//取文件擴(kuò)展名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")
{
????//年_月_日_時(shí)分秒毫秒.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、打開工程：
對(duì)于文檔的上傳我們需要知道這個(gè)項(xiàng)目的邏輯是否符合我們的構(gòu)造。
運(yùn)行：
?
嘗試使用文檔復(fù)制后粘貼進(jìn)來：
?
圖片上傳進(jìn)度
?
通過粘貼后，文檔以及圖片被粘貼進(jìn)來了，看看html代碼是否如我們的預(yù)期：
?
看來這個(gè)工程完全符合我們的預(yù)期，圖片全部使用img標(biāo)簽統(tǒng)一。傳輸進(jìn)度條的效果超出了我的意料。
來看看我們的文檔圖片被放置在哪了：
?
地址：D:\wamp64\www\WordPasterCKEditor4x\php\upload\201904\16
圖片被統(tǒng)一放置在文件夾。
由此看來這個(gè)項(xiàng)目的實(shí)際效果大大超出了我的意料了，帶入工程后完美的優(yōu)化了工程項(xiàng)目
工程目錄截圖：
?
?
控件包：
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/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
轉(zhuǎn)載于:https://www.cnblogs.com/songsu/p/11009516.html
總結(jié)
以上是生活随笔為你收集整理的php+ tinymce粘贴word的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： zabbix监控超详细搭建过程
- 下一篇： shell编程必须要掌握的命令-xarg