UEditor是由百度web前端研發(fā)部開發(fā)所見即所得富文本web編輯器，具有輕量，可定制，注重用戶體驗等特點，開源基于MIT協(xié)議，允許自由使用和修改代碼..
1 下載ueditor nodejs版本
2 復(fù)制public目錄下面的文件
到項目靜態(tài)資源public文件夾下
3 在項目根目錄創(chuàng)建ueditor文件夾
要復(fù)制進來的內(nèi)容為
4 在根目錄的 ueditor文件夾下執(zhí)行 npm install 安裝此目錄下面package.json依賴的模塊
5 項目根目錄下創(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/';//默認圖片上傳地址 /*其他上傳格式的地址*/ 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ā)起圖片列表請求 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 目錄下的所有圖片 } // 客戶端發(fā)起其它請求 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 路由設(shè)置 根目錄下 app.js ---use()匹配的所有的路由/ueditor/ue，都會走 這個路由
7 后臺模板使用富文本編輯器 --這里我后臺主要發(fā)布文章的時候用到富文本編輯器
特別注意：一定要實例化
百度的這個富文本編輯器提供了很多種api 具體的請看
8 由于我使用form(post)方式向mysql數(shù)據(jù)庫添加數(shù)據(jù),所以在點擊提交的按鈕的時候，將富文本編輯器里面的內(nèi)容 添加到 form的一個input里面
$('button[type="submit"]').click(function () { var conData = getContent(); $('input.content').val(conData);}）;9 效果展示 --
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
