大部分編輯器的后臺是基于java、php、asp等,很少有基于node.js的。今天就做一個基于node的
最近在做一個微信素材編輯器的小項目，使用到了UEditor編輯器，使用中出現(xiàn)了許多問題。
1.介紹
UEditor是由百度web前端研發(fā)部開發(fā)所見即所得富文本web編輯器，具有輕量，可定制，注重用戶體驗等特點，開源基于MIT協(xié)議，允許自由使用和修改代碼...
2.下載
下載地址 ：//m.survivalescaperooms.com/codes/45434.html
選擇開發(fā)版 ，因為我們使用node ,所以隨便下一個版本，這里下載1.4.3.3 jsp 版本
下載完成解壓。
3.創(chuàng)建項目
使用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創(chuàng)建和引用編輯器實例，如果在某個閉包下引用該編輯器，直接調(diào)用UE.getEditor('editor')就能拿到相關(guān)的實例 var ue = UE.getEditor('editor'); </script> </html> 然后啟動項目，編輯器初始化成功！（注意引入文件路徑的問題，如果初始化失敗可以f12查看報錯進行調(diào)試）
我們這里為什么要這樣引入路徑 可以看這里 （API）
4.后端配置
僅僅這樣是不能進行上傳的
我們需要要配置后端文件。
修改 ueditor.config.js 文件
//找到這一行代碼 修改成這樣，這里的url為請求的路徑 // 服務器統(tǒng)一請求接口路徑 ,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 客戶發(fā)起上傳圖片請求 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下載需要設(shè)置返回頭尾text/html 不然json返回文件會被直接下載打開 } // 客戶端發(fā)起圖片列表請求 else if (req.query.action === 'listimage') { var dir_url = '/images/ueditor/'; res.ue_list(dir_url); // 客戶端會列出 dir_url 目錄下的所有圖片 } // 客戶端發(fā)起其它請求 else { // console.log('config.json') res.setHeader('Content-Type', 'application/json'); res.redirect('/ueditor/jsp/config.json'); } })); 修改完成重啟一下服務就好了，
5.其他配置
自動保存
//啟用自動保存 ,enableAutoSave: true //自動保存間隔時間， 單位ms ,saveInterval: 500
發(fā)現(xiàn)這樣啟用自動保存沒有成功，不知道為什么。
另一個方法是在實例編輯器之后調(diào)用
//實例化編輯器 //建議使用工廠方法getEditor創(chuàng)建和引用編輯器實例，如果在某個閉包下引用該編輯器，直接調(diào)用UE.getEditor('editor')就能拿到相關(guān)的實例 var ue = UE.getEditor('editor'); //注意一定要延時。要等這玩意載入成功。 setTimeout(function () { ue.execCommand('drafts'); }, 500); 自動保存成功！！
取消自動保存
啟用自動保存的時候會發(fā)現(xiàn)一直提示，是不是很煩，反正我是不能忍，怎么辦呢？
設(shè)置一下自動保存間隔時間，把它設(shè)長一點就好了。
//啟用自動保存 ,enableAutoSave: true //自動保存間隔時間， 單位ms ,saveInterval: 500 * 60 *60
這樣煩人的自動保存提示就不會出來了。
只取消提示
上面我取消自動保存之后會發(fā)現(xiàn)使用起來不舒服，每次刷新頁面，上次編輯的就沒有了。
我們能不能只取消提示，而保留自動保存功能呢。
我在網(wǎng)上找了下，并沒有發(fā)現(xiàn)。
那我們就自己寫一個簡單的保存吧。
我們可以使用html5的 localStorage 本地存儲功能，當我們離開當前頁面時候，把編輯器內(nèi)容存儲到本地，進入頁面時候提取數(shù)據(jù)。上代碼：
//實例化編輯器 var ue = UE.getEditor('editor'); $(function() { //初始化數(shù)據(jù),讀localstroage var allData = {}; if (localStorage.getItem('ueditor_content')!=null && localStorage.getItem('ueditor_content')!="") { allData = JSON.parse(localStorage.getItem('ueditor_content')); } //延時加載數(shù)據(jù) 要等編輯器加載成功，反正我不延時的時候沒有成功。 setTimeout(function () { ue.setContent (allData) }, 500); //離開頁面或者刷新頁面觸發(fā)方法 window.onbeforeunload = function() { localStorage.setItem("ueditor_content", JSON.stringify(ue.getContent())); } }) 6.添加音樂
添加音樂好坑啊，
這是什么鬼，我要的是這樣的效果好么。
要不然你就這樣也好
有會的老司機請指導指導！
7.解決圖片過大超出編輯器
有時候圖片寬度超出了編輯器的寬度，我們會想讓他等比縮放
在配置里面找了下，沒找到這個配置。不過編輯器提供了一個iframe.css讓我們寫自己的配置
我們可以在里面設(shè)置:
img { max-width: 100%; /*圖片自適應寬度*/ } 這樣圖片再怎么拉伸寬度都超不過邊界。別看很簡單，但是花了不少時間研究。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
