nodejs后臺(tái)集成ueditor富文本編輯器的實(shí)例
UEditor是由百度web前端研發(fā)部開發(fā)所見即所得富文本web編輯器，具有輕量，可定制，注重用戶體驗(yàn)等特點(diǎn)，開源基于MIT協(xié)議，允許自由使用和修改代碼..
1 下載ueditor nodejs版本
2 復(fù)制public目錄下面的文件
到項(xiàng)目靜態(tài)資源public文件夾下
3 在項(xiàng)目根目錄創(chuàng)建ueditor文件夾
要復(fù)制進(jìn)來的內(nèi)容為
4 在根目錄的 ueditor文件夾下執(zhí)行 npm install 安裝此目錄下面package.json依賴的模塊
5 項(xiàng)目根目錄下創(chuàng)建 ue.js 代碼部分來自于
ue.js 代碼
const express = require('express'),
path = require('path'),
ueditor = require("./ueditor/"),
router = express.Router();
router.use("/",ueditor(path.join(process.cwd(),'public'),function (req,res,next){
//客戶端上傳文件設(shè)置
//console.log(req.query.action);
let ActionType = req.query.action;
if(ActionType === 'uploadimage' || ActionType === 'uploadfile' || ActionType === 'uploadvideo'){
let file_url = '/img/ueditor/';//默認(rèn)圖片上傳地址
/*其他上傳格式的地址*/
if(ActionType === 'uploadfile'){
file_url = '/file/ueditor/'; //附件
}
if(ActionType === 'uploadvideo'){
file_url = '/video/ueditor/'; //視頻
}
res.ue_up(file_url); //你只要輸入要保存的地址 。保存操作交給ueditor來做
res.setHeader('Content-Type','text/html');
}
// 客戶端發(fā)起圖片列表請(qǐng)求
else if(req.query.action === 'listimage'){
let dir_url = '/img/ueditor/';
res.ue_list(dir_url); // 客戶端會(huì)列出 dir_url 目錄下的所有圖片
}else if(req.query.action === 'listfile'){
let dir_url = '/file/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/nodejs/config.json');
}
}));
module.exports = router;
特別說明 默認(rèn)ueditor上傳的圖片路徑為 public/img/ueditor
6 路由設(shè)置 根目錄下 app.js ---use()匹配的所有的路由/ueditor/ue，都會(huì)走 這個(gè)路由
7 后臺(tái)模板使用富文本編輯器 --這里我后臺(tái)主要發(fā)布文章的時(shí)候用到富文本編輯器
特別注意：一定要實(shí)例化
百度的這個(gè)富文本編輯器提供了很多種api 具體的請(qǐng)看
8 由于我使用form(post)方式向mysql數(shù)據(jù)庫添加數(shù)據(jù),所以在點(diǎn)擊提交的按鈕的時(shí)候，將富文本編輯器里面的內(nèi)容 添加到 form的一個(gè)input里面
$('button[type="submit"]').click(function () {
var conData = getContent();
$('input.content').val(conData);
}）;
9 效果展示 --
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
zlib模塊是Node.js中用于數(shù)據(jù)壓縮和解壓縮的強(qiáng)大工具,它提供了多種壓縮算法和靈活的使用方式,包括Deflate、Gzip等,廣泛用于網(wǎng)絡(luò)傳輸和文件存儲(chǔ)中以減少數(shù)據(jù)大小,提高性能,本文給大家介紹Node.js zlib模塊屬性、方法及使用示例,感興趣的朋友跟隨小編一起看看吧2024-08-08
在看nodejs介紹的過程中，nodejs對(duì)自己的異步I/O是重點(diǎn)突出的說明的。在fs模塊中，nodejs提供了異步和同步兩種讀寫方式2015-01-01
學(xué)習(xí)JavaScript語言，你會(huì)發(fā)現(xiàn)它有兩種格式的模塊。一種是ES6模塊，簡(jiǎn)稱ESM；另一種是Node.js專用的CommonJS模塊，簡(jiǎn)稱 CJS。這兩種模塊不兼容。很多人使用Node.js，只會(huì)用require()加載模塊，遇到ES6模塊就不知道該怎么辦。本文就來談?wù)凟S6模塊在Node.js里面怎么使用。2021-05-05
node實(shí)現(xiàn)批量上傳本地圖片轉(zhuǎn)為圖片CDN的項(xiàng)目實(shí)踐
本文主要介紹了node實(shí)現(xiàn)批量上傳本地圖片轉(zhuǎn)為圖片CDN的項(xiàng)目實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要介紹了在node中如何調(diào)用python腳本，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Node.js實(shí)現(xiàn)用戶身份驗(yàn)證和授權(quán)的示例代碼
在web開發(fā)中,我們常常需要對(duì)一些敏感的url進(jìn)行訪問權(quán)限控制,本文主要介紹了Node.js實(shí)現(xiàn)用戶身份驗(yàn)證和授權(quán)的示例代碼,具有一定的參考價(jià)值,感興趣的了解一下2024-02-02
這篇文章主要給大家介紹了關(guān)于nodejs的錯(cuò)誤處理過程的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
Nodejs Stream 數(shù)據(jù)流使用手冊(cè)
這篇文章主要介紹了Nodejs Stream 數(shù)據(jù)流使用手冊(cè)的相關(guān)資料，感興趣的小伙伴一起學(xué)習(xí)吧2016-04-04
用node擼一個(gè)監(jiān)測(cè)復(fù)聯(lián)4開售短信提醒的實(shí)現(xiàn)代碼
這篇文章主要介紹了用node擼一個(gè)監(jiān)測(cè)復(fù)聯(lián)4開售短信提醒的實(shí)現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Express 配置HTML頁面訪問的實(shí)現(xiàn)
這篇文章主要介紹了Express 配置HTML頁面訪問的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11