1. 程式人生 > >node -- 使用UEditor富文字編輯器

node -- 使用UEditor富文字編輯器

最近在做一個微信素材編輯器的小專案,使用到了UEditor編輯器,使用中出現了許多問題。

1.介紹

UEditor是由百度web前端研發部開發所見即所得富文字web編輯器, 具有輕量,可定製,注重使用者體驗等特點,開源基於MIT協議,允許自由使用和修改程式碼...

2.下載

選擇開發版 ,因為我們使用node ,所以隨便下一個版本,這裡下載1.4.3.3 jsp 版本 下載完成解壓。

3.建立專案

使用express生成器生成一個專案,並安裝好依賴模組
$express ue-test -ejs
$cd ue-test && npm install 
把剛剛壓縮好的檔案重新命名為ueditor 放入ue-test/pubilc 中
修改index.ejs頁面:
<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" charset="utf-8" src="../ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="../ueditor/ueditor.all.min.js"> </script>
    <!--建議手動加在語言,避免在ie下有時因為載入語言失敗導致編輯器載入失敗-->
    <!--這裡載入的語言檔案會覆蓋你在配置專案裡新增的語言型別,比如你在配置專案裡配置的是英文,這裡載入的中文,那最後就是中文-->
    <script type="text/javascript" charset="utf-8" src="../ueditor/lang/zh-cn/zh-cn.js"></script>
  </head>
  <body>
     <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
  </body>


<script type="text/javascript">

    //例項化編輯器
    //建議使用工廠方法getEditor建立和引用編輯器例項,如果在某個閉包下引用該編輯器,直接呼叫UE.getEditor('editor')就能拿到相關的例項
    var ue = UE.getEditor('editor');

</script>
</html>
然後啟動專案,編輯器初始化成功!(注意引入檔案路徑的問題,如果初始化失敗可以f12檢視報錯進行除錯) 我們這裡為什麼要這樣引入路徑 可以看這裡 (API

4.後端配置

僅僅這樣是不能進行上傳的 我們需要要配置後端檔案。  修改 ueditor.config.js 檔案
//找到這一行程式碼 修改成這樣,這裡的url為請求的路徑
// 伺服器統一請求介面路徑
        ,serverUrl: URL + "ue"

接下來我們安裝ueditor 模組
$npm install ueditor --save
ueditor模組有一個示例,照著修改就好了
修改app.js:
//載入ueditor 模組
var ueditor = require("ueditor");

//使用模組
app.use("/ueditor/ue", ueditor(path.join(__dirname, 'public'), function (req, res, next) {
    // ueditor 客戶發起上傳圖片請求
    if (req.query.action === 'uploadimage') {
        var foo = req.ueditor;

        var imgname = req.ueditor.filename;

        var img_url = '/images/ueditor/';
        res.ue_up(img_url); //你只要輸入要儲存的地址 。儲存操作交給ueditor來做
        res.setHeader('Content-Type', 'text/html');//IE8下載需要設定返回頭尾text/html 不然json返回檔案會被直接下載開啟
    }
    //  客戶端發起圖片列表請求
    else if (req.query.action === 'listimage') {
        var dir_url = '/images/ueditor/';
        res.ue_list(dir_url); // 客戶端會列出 dir_url 目錄下的所有圖片
    }
    // 客戶端發起其它請求
    else {
        // console.log('config.json')
        res.setHeader('Content-Type', 'application/json');
        res.redirect('/ueditor/jsp/config.json');
    }
}));

修改完成重啟一下服務就好了,


5.其他配置

自動儲存

<pre name="code" class="javascript">//啟用自動儲存
        ,enableAutoSave: true
        //自動儲存間隔時間, 單位ms
        ,saveInterval: 500

發現這樣啟用自動儲存沒有成功,不知道為什麼。 另一個方法是在例項編輯器之後呼叫
    //例項化編輯器
    //建議使用工廠方法getEditor建立和引用編輯器例項,如果在某個閉包下引用該編輯器,直接呼叫UE.getEditor('editor')就能拿到相關的例項
    var ue = UE.getEditor('editor');

    //注意一定要延時。要等這玩意載入成功。
    setTimeout(function () {
        ue.execCommand('drafts');
    }, 500); 
自動儲存成功!!

取消自動儲存

啟用自動儲存的時候會發現一直提示,是不是很煩,反正我是不能忍,怎麼辦呢?
設定一下自動儲存間隔時間,把它設長一點就好了。
//啟用自動儲存
        ,enableAutoSave: true
        //自動儲存間隔時間, 單位ms
        ,saveInterval: 500 * 60 *60

這樣煩人的自動儲存提示就不會出來了。


只取消提示

上面我取消自動儲存之後會發現使用起來不舒服,每次重新整理頁面,上次編輯的就沒有了。 我們能不能只取消提示,而保留自動儲存功能呢。 我在網上找了下,並沒有發現。 那我們就自己寫一個簡單的儲存吧。 我們可以使用html5的 localStorage 本地儲存功能, 當我們離開當前頁面時候,把編輯器內容儲存到本地, 進入頁面時候提取資料。 上程式碼:
  //例項化編輯器
var ue = UE.getEditor('editor');
$(function() {
	//初始化資料,讀localstroage 
  var allData = {};
  if (localStorage.getItem('ueditor_content')!=null && localStorage.getItem('ueditor_content')!="") {
		allData =	JSON.parse(localStorage.getItem('ueditor_content')); 
	} 

  //延時載入資料 要等編輯器載入成功,反正我不延時的時候沒有成功。
  setTimeout(function () {
        ue.setContent (allData)
  }, 500); 

  //離開頁面或者重新整理頁面觸發方法
	window.onbeforeunload = function() {
		localStorage.setItem("ueditor_content", JSON.stringify(ue.getContent()));
	} 

})


6.新增音樂

新增音樂好坑啊,
這是什麼鬼微笑微笑微笑微笑微笑微笑,我要的是這樣的效果好麼。
要不然你就這樣也好
有會的老司機請指導指導!

7.解決圖片過大超出編輯器

有時候圖片寬度超出了編輯器的寬度,我們會想讓他等比縮放 在配置裡面找了下,沒找到這個配置。 不過編輯器提供了一個iframe.css讓我們寫自己的配置
我們可以在裡面設定:
img {
 max-width: 100%; /*圖片自適應寬度*/
} 
 
這樣圖片再怎麼拉伸寬度都超不過邊界。 別看很簡單,但是花了不少時間研究。