html富文本编辑器与nodejs,关于Node.js直接使用Html及配置Ueditor编辑器

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

###一、配置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});

});

};

如图：

###二、给Node.js网页配置Ueditor富文本编辑器

1、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');

}

}));

2、官方提供的文件拷入，配置上传图片路径

3、前端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('数据上传失败'); } } }); });

4、后台处理用户提交的数据(如这里保存一条新闻纪录)

//提交活动信息

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('/');

});

};

参考：