node使用UEditor富文本編輯器的方法實(shí)例
大部分編輯器的后臺(tái)是基于java、php、asp等,很少有基于node.js的。今天就做一個(gè)基于node的
最近在做一個(gè)微信素材編輯器的小項(xiàng)目，使用到了UEditor編輯器，使用中出現(xiàn)了許多問題。
1.介紹
UEditor是由百度web前端研發(fā)部開發(fā)所見即所得富文本web編輯器，具有輕量，可定制，注重用戶體驗(yàn)等特點(diǎn)，開源基于MIT協(xié)議，允許自由使用和修改代碼...
2.下載
下載地址 ：http://m.fzitv.net/codes/45434.html
選擇開發(fā)版 ，因?yàn)槲覀兪褂胣ode ,所以隨便下一個(gè)版本，這里下載1.4.3.3 jsp 版本
下載完成解壓。
3.創(chuàng)建項(xiàng)目
使用express生成器生成一個(gè)項(xiàng)目,并安裝好依賴模塊
$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>
<!--建議手動(dòng)加在語言，避免在ie下有時(shí)因?yàn)榧虞d語言失敗導(dǎo)致編輯器加載失敗-->
<!--這里加載的語言文件會(huì)覆蓋你在配置項(xiàng)目里添加的語言類型，比如你在配置項(xiàng)目里配置的是英文，這里加載的中文，那最后就是中文-->
<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">
//實(shí)例化編輯器
//建議使用工廠方法getEditor創(chuàng)建和引用編輯器實(shí)例，如果在某個(gè)閉包下引用該編輯器，直接調(diào)用UE.getEditor('editor')就能拿到相關(guān)的實(shí)例
var ue = UE.getEditor('editor');
</script>
</html>
然后啟動(dòng)項(xiàng)目，編輯器初始化成功?。ㄗ⒁庖胛募窂降膯栴}，如果初始化失敗可以f12查看報(bào)錯(cuò)進(jìn)行調(diào)試）
我們這里為什么要這樣引入路徑 可以看這里 （API）
4.后端配置
僅僅這樣是不能進(jìn)行上傳的
我們需要要配置后端文件。
修改 ueditor.config.js 文件
//找到這一行代碼 修改成這樣，這里的url為請(qǐng)求的路徑
// 服務(wù)器統(tǒng)一請(qǐng)求接口路徑
,serverUrl: URL + "ue"
接下來我們安裝ueditor 模塊
$npm install ueditor --save
ueditor模塊有一個(gè)示例，照著修改就好了
修改app.js：
//加載ueditor 模塊
var ueditor = require("ueditor");
//使用模塊
app.use("/ueditor/ue", ueditor(path.join(__dirname, 'public'), function (req, res, next) {
// ueditor 客戶發(fā)起上傳圖片請(qǐng)求
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返回文件會(huì)被直接下載打開
}
// 客戶端發(fā)起圖片列表請(qǐng)求
else if (req.query.action === 'listimage') {
var dir_url = '/images/ueditor/';
res.ue_list(dir_url); // 客戶端會(huì)列出 dir_url 目錄下的所有圖片
}
// 客戶端發(fā)起其它請(qǐng)求
else {
// console.log('config.json')
res.setHeader('Content-Type', 'application/json');
res.redirect('/ueditor/jsp/config.json');
}
}));
修改完成重啟一下服務(wù)就好了，
5.其他配置
自動(dòng)保存
//啟用自動(dòng)保存 ,enableAutoSave: true //自動(dòng)保存間隔時(shí)間， 單位ms ,saveInterval: 500
發(fā)現(xiàn)這樣啟用自動(dòng)保存沒有成功，不知道為什么。
另一個(gè)方法是在實(shí)例編輯器之后調(diào)用
//實(shí)例化編輯器
//建議使用工廠方法getEditor創(chuàng)建和引用編輯器實(shí)例，如果在某個(gè)閉包下引用該編輯器，直接調(diào)用UE.getEditor('editor')就能拿到相關(guān)的實(shí)例
var ue = UE.getEditor('editor');
//注意一定要延時(shí)。要等這玩意載入成功。
setTimeout(function () {
ue.execCommand('drafts');
}, 500);
自動(dòng)保存成功！！
取消自動(dòng)保存
啟用自動(dòng)保存的時(shí)候會(huì)發(fā)現(xiàn)一直提示，是不是很煩，反正我是不能忍，怎么辦呢？
設(shè)置一下自動(dòng)保存間隔時(shí)間，把它設(shè)長一點(diǎn)就好了。
//啟用自動(dòng)保存 ,enableAutoSave: true //自動(dòng)保存間隔時(shí)間， 單位ms ,saveInterval: 500 * 60 *60
這樣煩人的自動(dòng)保存提示就不會(huì)出來了。
只取消提示
上面我取消自動(dòng)保存之后會(huì)發(fā)現(xiàn)使用起來不舒服，每次刷新頁面，上次編輯的就沒有了。
我們能不能只取消提示，而保留自動(dòng)保存功能呢。
我在網(wǎng)上找了下，并沒有發(fā)現(xiàn)。
那我們就自己寫一個(gè)簡單的保存吧。
我們可以使用html5的 localStorage 本地存儲(chǔ)功能，當(dāng)我們離開當(dāng)前頁面時(shí)候，把編輯器內(nèi)容存儲(chǔ)到本地，進(jìn)入頁面時(shí)候提取數(shù)據(jù)。上代碼：
//實(shí)例化編輯器
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í)加載數(shù)據(jù) 要等編輯器加載成功，反正我不延時(shí)的時(shí)候沒有成功。
setTimeout(function () {
ue.setContent (allData)
}, 500);
//離開頁面或者刷新頁面觸發(fā)方法
window.onbeforeunload = function() {
localStorage.setItem("ueditor_content", JSON.stringify(ue.getContent()));
}
})
6.添加音樂
添加音樂好坑啊，
這是什么鬼，我要的是這樣的效果好么。
要不然你就這樣也好
有會(huì)的老司機(jī)請(qǐng)指導(dǎo)指導(dǎo)！
7.解決圖片過大超出編輯器
有時(shí)候圖片寬度超出了編輯器的寬度，我們會(huì)想讓他等比縮放
在配置里面找了下，沒找到這個(gè)配置。不過編輯器提供了一個(gè)iframe.css讓我們寫自己的配置
我們可以在里面設(shè)置:
img {
max-width: 100%; /*圖片自適應(yīng)寬度*/
}
這樣圖片再怎么拉伸寬度都超不過邊界。別看很簡單，但是花了不少時(shí)間研究。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
nodejs服務(wù)內(nèi)存泄露排查過程和優(yōu)化方法
在開發(fā)和部署Node.js應(yīng)用程序時(shí),內(nèi)存泄露是一個(gè)常見的挑戰(zhàn),本文將探討如何對(duì)于一個(gè)陌生項(xiàng)目進(jìn)行內(nèi)存排查和優(yōu)化的方法,文章通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
學(xué)習(xí)使用grunt來打包JavaScript和CSS程序的教程
這篇文章主要介紹了學(xué)習(xí)使用grunt來打包JavaScript和CSS程序的教程,grunt基于node.js和需要的朋友可以參考下2016-01-01
npm?install安裝報(bào)錯(cuò):gyp?info?it?worked?if?it?ends?with?
今天新啟動(dòng)一個(gè)項(xiàng)目,在 npm install 安裝依賴項(xiàng)時(shí)出現(xiàn)報(bào)錯(cuò),所以下面這篇文章主要給大家介紹了關(guān)于npm?install安裝報(bào)錯(cuò):gyp?info?it?worked?if?it?ends?with?ok的解決方法,需要的朋友可以參考下2022-07-07
Nodejs中的計(jì)時(shí)器(setTimeout?setIntervals?etImmediate)使用案例解析
這篇文章主要介紹了Nodejs中的計(jì)時(shí)器(setTimeout?setIntervals?etImmediate)使用案例解析,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
Node.js?中?fs?模塊的高級(jí)用法實(shí)例詳解
文章介紹了Node.js中fs模塊的高級(jí)用法,包括流式讀寫、文件監(jiān)視、PromiseAPI、遞歸目錄操作等,這些功能有助于更好地處理復(fù)雜文件操作場(chǎng)景,提升代碼性能和可維護(hù)性,感興趣的朋友跟隨小編一起看看吧2025-02-02
nodejs?express路由匹配控制及Router模塊化使用詳解
這篇文章主要為大家介紹了nodejs?express路由匹配控制及Router模塊化使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要為大家介紹了阿里云OSS實(shí)踐文件直傳基于服務(wù)端實(shí)現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
Node.js進(jìn)行文件讀取與復(fù)制的系統(tǒng)總結(jié)
這篇文章主要為大家詳細(xì)介紹了Node.js中文件讀取與復(fù)制相關(guān)內(nèi)容的系統(tǒng)總結(jié),包括 同步讀取,異步讀取,復(fù)制操作等,有需要的小伙伴可以跟隨小編一起了解下2025-04-04
nodejs中使用worker_threads來創(chuàng)建新的線程的方法
這篇文章主要介紹了nodejs中使用worker_threads來創(chuàng)建新的線程的方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01
Node.js中console.log()輸出彩色字體的方法示例
這篇文章主要給大家介紹了關(guān)于Node.js中console.log()輸出彩色字體的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Node.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12