关于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