Ueditor文本編輯器的自定義上傳路徑使用以及其回顯

　　在頁面中咱們有時候須要圖文編輯來記錄用戶的多樣化輸入好比博客園的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; } }

　　這樣就能夠方便的上傳到騰訊雲了，其實本質上就是把其內部的部分源碼註釋掉，修改成本身的上傳方法，同時返回一樣的回調讓文本編輯器可以識別，這樣就完成整個過程。修改以後無論阿里雲百度雲只要用其對應的接口均可上傳上去，本文的騰訊雲只是一個例子，以不變應萬變纔是王道。