如何在node中使用UEditor富文本編輯器

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)如何在node中使用UEditor富文本編輯器，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),海鹽企業(yè)網(wǎng)站建設(shè),海鹽品牌網(wǎng)站建設(shè),網(wǎng)站定制,海鹽網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,海鹽網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

1.介紹

UEditor是由百度web前端研發(fā)部開發(fā)所見即所得富文本web編輯器，具有輕量，可定制，注重用戶體驗(yàn)等特點(diǎn)，開源基于MIT協(xié)議，允許自由使用和修改代碼...

2.下載

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" ></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）

如何在node中使用UEditor富文本編輯器

4.后端配置

僅僅這樣是不能進(jìn)行上傳的

我們需要要配置后端文件。

修改 ueditor.config.js 文件

//找到這一行代碼 修改成這樣，這里的url為請求的路徑 
// 服務(wù)器統(tǒ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ā)起上傳圖片請求 
  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ā)起圖片列表請求 
  else if (req.query.action === 'listimage') { 
    var dir_url = '/images/ueditor/'; 
    res.ue_list(dir_url); // 客戶端會(huì)列出 dir_url 目錄下的所有圖片 
  } 
  // 客戶端發(fā)起其它請求 
  else { 
    // console.log('config.json') 
    res.setHeader('Content-Type', 'application/json'); 
    res.redirect('/ueditor/jsp/config.json'); 
  } 
}));

修改完成重啟一下服務(wù)就好了，

如何在node中使用UEditor富文本編輯器

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)保存成功?。?/p>

取消自動(dòng)保存

啟用自動(dòng)保存的時(shí)候會(huì)發(fā)現(xiàn)一直提示，是不是很煩，反正我是不能忍，怎么辦呢？

如何在node中使用UEditor富文本編輯器

設(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.添加音樂

添加音樂好坑啊，

如何在node中使用UEditor富文本編輯器

這是什么鬼，我要的是這樣的效果好么。

如何在node中使用UEditor富文本編輯器

要不然你就這樣也好

如何在node中使用UEditor富文本編輯器

有會(huì)的老司機(jī)請指導(dǎo)指導(dǎo)！

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

有時(shí)候圖片寬度超出了編輯器的寬度，我們會(huì)想讓他等比縮放

在配置里面找了下，沒找到這個(gè)配置。不過編輯器提供了一個(gè)iframe.css讓我們寫自己的配置

如何在node中使用UEditor富文本編輯器

我們可以在里面設(shè)置:

img { 
 max-width: 100%; /*圖片自適應(yīng)寬度*/ 
}

上述就是小編為大家分享的如何在node中使用UEditor富文本編輯器了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前名稱：如何在node中使用UEditor富文本編輯器
網(wǎng)頁路徑：http://www.rwnh.cn/article18/ipcedp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、云服務(wù)器、微信小程序、網(wǎng)站改版、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站內(nèi)鏈

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

如何在node中使用UEditor富文本編輯器