nodejs后台集成富文本編輯器（ueditor）

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 效果展示 --