關於Node.js直接使用Html及配置Ueditor編輯器

特別好的一篇參考博客——node.js配置ueditor：

http://blog.csdn.net/a1104258464/article/details/52231737

###1、配置Html，無需ejs或者jade模板

app.js中配置：
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.engine('.html', require('ejs').__express);
app.set('view engine', 'html');

路由響應請求的時候使用，如：訪問首頁時及訪問view/website/index的文件,由於上文直接將咱們的視圖文件映射到了Views中。
exports.index = function(req, res) {
    // 從數據庫中查詢數據
    Activity.find().sort('-date').limit(6).exec(function(err,activs){
        if(err){
            console.log('獲取數據失敗');
        }
        res.render('website/index',{datas:activs});
    });
};

如圖：

###2、給Node.js網頁配置Ueditor富文本編輯器

• 一、app.js 配置

先npm安裝Ueditor；再在app.js中引入
var ueditor = require("ueditor");
//上傳相片路徑（參照官方文檔配置）
app.use("/ueditor/ue", ueditor(path.join(__dirname, 'public'), function(req, res, next) {
  // ueditor 客戶發起上傳圖片請求
  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來作
  }
  //  客戶端發起圖片列表請求
  else if (req.query.action === 'listimage') {
    var dir_url = '/images/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');
  }
}));

• 二、官方提供的文件拷入，配置上傳圖片路徑
  

• 三、前端Html頁面使用（經過post方式上傳JSON數據） //實例化編輯器 //建議使用工廠方法getEditor建立和引用編輯器實例，若是在某個閉包下引用該編輯器，直接調用UE.getEditor('editor')就能拿到相關的實例 var ue = UE.getEditor('editor');
  $("#submit").click(function(){
  $.ajax({
  type: "post",
  url: "/add_activity",
  data: {activ_title:$("#activ_title").val(),activ_author:$("#activ_author").val(),activ_time:$("#activ_time").val(),
  activ_category:$('#qiye_type input[name="news_type"]:checked').val(),activ_content:UE.getEditor('editor').getContent()}, //得到單選的值 data: {"password":"McLaughlin","email":"aaaa"}, dataType: "json", success: function(data){ if(data.status==="success"){ //上傳數據成功 alert("數據上傳成功"); } else{ //上傳數據失敗 alert('數據上傳失敗'); } } }); });

• 四、後臺處理用戶提交的數據（如這裏保存一條新聞紀錄）

//提交活動信息
exports.add_post= function(req, res) {
    var title=req.body.activ_title;
    var content=req.body.activ_content;
    var time=req.body.activ_time;
    var author=req.body.activ_author;
    var category=req.body.activ_category;
    console.log(time+author+category);
    var activ=new Activity(
        {
            title:title,
            content:content,
            date:time,
            author:author,
            category:category
        }
    );
    activ.save(function(err){
        if(err){
            console.log('添加活動失敗');
           // res.render('error');
            res.json({"status":"error"});
        }
        res.json({"status":"success"});
        //跳轉到主頁面
     //   res.redirect('/');
    });
};

參考：

• 一、https://github.com/netpi/ueditor
• 二、參考教程1：https://cnodejs.org/topic/5576496ec4e7fbea6e9a31ea
• 三、參考教程2：http://blog.csdn.net/u012536005/article/details/51083709