nodejs背景內建ueditor富文本編輯器的執行個體
釋出時間：2020-08-23 17:50:47
來源：腳本之家
閱讀：179
作者：Jesonhu
UEditor是由百度web前端研發部開發所見即所得富文本web編輯器，具有輕量，可定制，注重使用者體驗等特點，開源基于MIT協定，允許自由使用和修改代碼..
1 下載下傳ueditor nodejs版本
2 複制public目錄下面的檔案
到項目靜态資源public檔案夾下
3 在項目根目錄建立ueditor檔案夾
要複制進來的内容為
4 在根目錄的 ueditor檔案夾下執行 npm install 安裝此目錄下面package.json依賴的子產品
5 項目根目錄下建立 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){
//用戶端上傳檔案設定
//console.log(req.query.action);
let ActionType = req.query.action;
if(ActionType === 'uploadimage' || ActionType === 'uploadfile' || ActionType === 'uploadvideo'){
let file_url = '/img/ueditor/';//預設圖檔上傳位址
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');
}
// 用戶端發起圖檔清單請求
else if(req.query.action === 'listimage'){
let dir_url = '/img/ueditor/';
res.ue_list(dir_url); // 用戶端會列出 dir_url 目錄下的所有圖檔
}else if(req.query.action === 'listfile'){
let dir_url = '/file/ueditor/';
res.ue_list(dir_url); // 用戶端會列出 dir_url 目錄下的所有圖檔
}
// 用戶端發起其它請求
else{
// console.log('config.json')
res.setHeader('Content-Type','application/json');
res.redirect('/ueditor/nodejs/config.json');
}
}));
module.exports = router;
特别說明 預設ueditor上傳的圖檔路徑為 public/img/ueditor
6 路由設定 根目錄下 app.js ---use()比對的所有的路由/ueditor/ue，都會走 這個路由
7 背景模闆使用富文本編輯器 --這裡我背景主要釋出文章的時候用到富文本編輯器
特别注意：一定要執行個體化
百度的這個富文本編輯器提供了很多種api 具體的請看
8 由于我使用form(post)方式向mysql資料庫添加資料,是以在點選送出的按鈕的時候，将富文本編輯器裡面的内容 添加到 form的一個input裡面
$('button[type="submit"]').click(function () {
var conData = getContent();
$('input.content').val(conData);
});
9 效果展示 --
以上就是本文的全部内容，希望對大家的學習有所幫助，也希望大家多多支援億速雲。