nodejs + ueditor + qn + at.js 构建富文本编辑器图片文件上传及@功能

1. ueditor

ueditor为百度前端团队开发的一款功能强大的富文本编辑器，使用也比较方便。

其主页为：http://ueditor.baidu.com/website/

使用时必须引入的文件有：
ueditor.css
ueditor.config.js
ueditor.all.js
后端需要使用ueditor.config.json;
ueditor.config.js的具体配置请查看官网api；
后台为node或者php的话，下载php版本即可

基本使用：

// html，可以为script标签，也可以为textarea标签
<script id="container" name="content" type="text/plain">需要初始化的数据</script>
<!-- <textarea id="container">需要初始化的数据</textarea> -->

// js实例化即可，可以传一个json参数作为初始化的使用定制
var ue = UE.getEditor('container');

2. 七牛文件上传

搭配nodejs使用七牛，此处并没有使用七牛官方提供 js sdk ，而是使用的 node-ueditor 的一款针对ueditor的插件。实现图片文件的上传与管理。

安装: npm install ueditor --save

使用: 

// 此为没有使用7牛存储，将上传的图片存储到自己服务器的情况
var bodyParser = require('body-parser')
var ueditor = require("ueditor")
app.use(bodyParser.urlencoded({
  extended: true
}))
app.use(bodyParser.json());
app.use("/ueditor/ue", ueditor(path.join(__dirname, 'public'), function(req, res, next) {
  // ueditor 客户发起上传图片请求
  if(req.query.action === 'uploadimage'){
    var foo = req.ueditor;
    var date = new Date();
    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 {
    res.setHeader('Content-Type', 'application/json');
    res.redirect('/ueditor/ueditor.config.json')  // ueditor初始化时会向设置的/ueditor/ue路由发起请求，需要返回ueditor.config.json
}}));

// qn存储
var bodyParser = require('body-parser')
var ueditor = require("ueditor")
app.use(bodyParser.urlencoded({
  extended: true
}))
app.use(bodyParser.json());
// 支持七牛上传，如有需要请配置好qn参数，如果没有qn参数则存储在本地
app.use("/ueditor/ue", ueditor(path.join(__dirname, 'public'), {
    qn: {
        accessKey: 'your access key',             // qn accessKey
        secretKey: 'your secret key',             // qn secretKey
        bucket: 'your bucket name',               // qn bucket
        origin: 'http://{bucket}.u.qiniudn.com',  // 这个地址是qn返回的图片地址域，使用融合cdn或者qn提供的测试域
        uploadURL: 'http://up-z2.qiniu.com'       // qn上传接口地址，这个为华南
    }
}, function(req, res, next) {
  // ueditor 客户发起上传图片请求，如果没有配置qn参数，则会上传到本地服务器；就会走下面的存储。
  var imgDir = '/img/ueditor/'
  if(req.query.action === 'uploadimage'){
    var foo = req.ueditor;
    var imgname = req.ueditor.filename;        
    res.ue_up(imgDir); //你只要输入要保存的地址 。保存操作交给ueditor来做
  }
  //  客户端发起图片列表请求
  else if (req.query.action === 'listimage'){        
    res.ue_list(imgDir);  // 客户端会列出 dir_url 目录下的所有图片
  }
  // 客户端发起其它请求
  else {
    res.setHeader('Content-Type', 'application/json');
    res.redirect('/ueditor/ueditor.config.json')
}}));

// 多文件类型存储
var bodyParser = require('body-parser')
var ueditor = require("ueditor")
app.use(bodyParser.urlencoded({
  extended: true
}))
app.use(bodyParser.json());
app.use("/ueditor/ue", ueditor(path.join(__dirname, 'public'), function(req, res, next) {
  var imgDir = '/img/ueditor/' //默认上传地址为图片
  var ActionType = req.query.action;
    if (ActionType === 'uploadimage' || ActionType === 'uploadfile' || ActionType === 'uploadvideo') {
        var file_url = imgDir;//默认上传地址为图片
        /*其他上传格式的地址*/
        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 (ActionType === 'listimage'){        
    res.ue_list(imgDir);  // 客户端会列出 dir_url 目录下的所有图片
  }
  // 客户端发起其它请求
  else {
    res.setHeader('Content-Type', 'application/json');
    res.redirect('/ueditor/ueditor.config.json')
}}));

其实这个插件已经不止用于搭配ueditor了，所有图片及文件的上传基本都可以使用了，不过对数据的处理比较死，没有更多的对上传文件进行加工。

3. at.js

用at.js实现 ‘@’ 书写功能。

github地址：https://github.com/ichord/At.js

必须要引入的文件：
jquery.atwho.css
jquery.min.js
jquery.caret.js
jquery.atwho-2.js

一定要注意at的版本，1.0以下好像与ueditor不兼容，@功能会有问题。

使用：

<script type="text/javascript">
var ue = UE.getEditor('container');
$(function(){
    var at_config = {
        at: "@",
        data:['Peter', 'Tom', 'Anne', 'zhangsan', 'lisi'],
        limit: 20
    }
    var ue = UE.getEditor('container',{
        autoClearinitialContent:true,
        //关闭字数统计
        wordCount:false,
        //关闭elementPath
        elementPathEnabled:false,
    });
    ue.addListener('ready', function(editor){
        $(this.document.body).atwho(at_config);
    });
});
</script>

以上3个插件就实现了富文本编辑器的常见使用功能，是不是比自己写方便多了呢~

THE END！