在頁面中我們有時候需要圖文編輯來記錄用戶的多樣化輸入比如博客園的TinyMCE編輯器，由於項目用到的是ueditor所以記錄一下其中的坑以及解決辦法，詳細的資料可以參考http://fex.baidu.com/ueditor/。
首先去官網http://ueditor.baidu.com/website/download.html下載項目代碼，由於本人是php后台所以就是下載php版本。然后把整個文件夾都拷貝到你的項目中去，不要因為官網的演示中只引用了ueditor.config.js和ueditor.all.js而只移動這兩個js因為這些文件都是相互關聯的，就按現在的結構整個文件夾都拷貝即可(下圖為官網演示)。
文件夾移動好后就准備開始實例化一個Ueditor：在html中先定義一個div包含整個ueditor，然后根據自己的項目路徑來引入對應的配置js文件,最后
通過UE.getEditor(id,[options])來創建一個ueditor，id為上面定義的id，options為初始化選項，我的選項中toolbars代表出現哪些圖標,initialFrameHeight和
initialFrameWeight代表初始化時的編輯器大小，添加成功后的頁面對應下圖。
<div> <!-- 加載編輯器的容器 --> <script id="container" type="text/plain"></script> <!-- 配置文件 --> <script type="text/javascript" src="../ueditor/ueditor.config.js"></script> <!-- 編輯器源碼文件 --> <script type="text/javascript" src="../ueditor/ueditor.all.js"></script> <!-- 實例化編輯器 --> <script type="text/javascript"> var ue = UE.getEditor('container',{ toolbars: [ [ 'undo', //撤銷 'bold', //加粗 'italic', //斜體 'underline', //下划線 'strikethrough', //刪除線 'formatmatch', //格式刷 'selectall', //全選 'print', //打印 'link', //超鏈接 'unlink', //取消鏈接 'fontfamily', //字體 'fontsize', //字號 'simpleupload', //單圖上傳 'insertimage', //多圖上傳 'help', //幫助 'justifyleft', //居左對齊 'justifyright', //居右對齊 'justifycenter', //居中對齊 'justifyjustify', //兩端對齊 'forecolor', //字體顏色 'backcolor', //背景色 'touppercase', //字母大寫 'tolowercase', //字母小寫 ] ], initialFrameWidth:700,//寬度 initialFrameHeight :320,//高度 }); </script>
</div>
編輯器在頁面上顯示出來了，接下來我們就要獲取里面的數據了。首先科普一下編輯器里的圖片是即時上傳的，只要你把圖片拉進去圖片就上傳到服務器了，隨后返回一個路徑分配給圖片的src屬性。而且官方文檔對於上傳路徑的解釋是相對於網站根目錄路徑，不能上傳到雲存儲如騰訊雲的內存里，所以當項目有幾台服務器負載均衡時服務器之間互相拉取圖片資源是個大坑有木有，不過自定義上傳路徑這個問題我放在最后解決，先按正常的思路來。
所以我們先開始學習獲取數據吧：官方文檔為我們提供了兩種常用的方式獲取數據，首先我們把樣例數據寫在編輯器里：
然后獲得數據，方法一：ue.getContent()-----------獲取帶html標簽的一段內容，其結果如下:
這段字符串可以直接保存在數據庫的字段里，到時候取出來可以直接原樣的回顯到網頁上。
方法二：ue.getPlainTxt() --------------------------獲取帶格式的文本內容，其結果如下：
這種格式的文本主要用於區分文字和img標簽來取得對應部分的內容，因為我要在移動端顯示時不可能繼續沿用html的標簽，所以只有對文字和圖片分別處理、獲值、最后重新排列顯示在移動終端上。在取值時對“<”和“>”分別進行分割，在對src進行分割最后才能取到值，相對麻煩。
好了，我們現在已經取到值存到數據庫了。新的問題來了，一旦用戶要重新編輯文本編輯器內的內容，就要讓數據回顯到頁面上。假如我們php后端從數據庫里取得變量為 $content="<p>你好啊<br/></p><p><img src="/server/ueditor/upload/image/demo.jpg" title="" alt="demo.jpg" /></p>"
當你在編輯頁面用之前的方法實例化一個ueditor並用其
ue.ready(function()
{
ue.setContent('{{$content}}');//這里的{{$content}}是我的框架前端頁面調用后端數據的方法，根據個人情況不同進行調整
});會發現頁面上顯示的都是帶標簽的文字而不是回顯的數據如下圖所示
造成這種現象的原因是$content從后端數據庫傳到前端時經過轉義了，所以要讓數據回顯，就先定義一個input使其值等於$content（第一層解析），然后你再獲取input.val()就可以了（第二層解析），具體代碼如下：
先定義一個type='hidden'的input
<input id='temp' type='hidden' value='{{$content}}' />
然后在ue.ready()里設置setContent()的值,這樣就可以讓數據成功顯示在編輯器里了。
<script>
//ue實例化之后
ue.ready(function() { ue.setContent($("#temp").val()); }); </script>
OK！數據顯示完了，現在再回來討論自定義上傳路徑的問題，由於文檔里顯示上傳的目錄都是相對於網站的根目錄，無法上傳到騰訊雲供多台服務器共享，所以沿着這個思路去研究一下他的上傳方法，於是在Uploader.class.php里找到了upFile()方法，
這個方法里最后幾行寫了上傳的路徑，如果你要把資源上傳到騰訊雲就把這幾行注釋掉，換成一個自己寫的方法
return $this->uploadCos($file['tmp_name']);
然后在這個類中定義一下自己寫的方法uploadCos();
private function uploadCos($file_tmp_name)
{ // 騰訊雲bucket $bucket = '你的bucket名稱'; // 長簽名 $expired = time() + 3600; // 生成長簽名,Auth為騰訊雲sdk的類，需要require到本文件中 $sign = Auth::appSign($expired,$bucket); // 請求時間限制，Cosapi為騰訊雲sdk的類，需要require到本文件中 Cosapi::setTimeout(100); //騰訊雲目錄 $dir = '你的目錄'; //上傳文件名 $file = str_replace(' ','_',ltrim(microtime(),'0.')).$this->fileType; //組合新的完整上傳路徑 $dst = $dir.$file; //先讓$localImage被賦值為$file_tmp_name $localImage = $file_tmp_name; // 騰訊雲上傳接口 $info = Cosapi::upload($bucket,$localImage,$dst); // 上傳回調 if($info['code'] == 0) {
//提示上傳成功
$this->stateInfo = $this->stateMap[0]; //把新的url地址賦給圖片的src屬性 $this->fullName = $info['data']['access_url']; return true; } else {//提示上傳失敗 $this->stateInfo = $this->getStateInfo("ERROR_FILE_MOVE"); return FALSE; } }
這樣就可以方便的上傳到騰訊雲了，其實本質上就是把其內部的部分源碼注釋掉，修改為自己的上傳方法，同時返回同樣的回調讓文本編輯器能夠識別，這樣就完成整個過程。修改之后不管阿里雲百度雲只要用其對應的接口都可上傳上去，本文的騰訊雲只是一個例子，以不變應萬變才是王道。