xheditor的使用（nodejs后台管理）_xheditor 无法加载-优快云博客

本文介绍如何在项目中集成XHEditor富文本编辑器，并实现图片上传功能。包括编辑器的安装、配置参数、解决乱码及上传图片不关闭的问题。同时，详细展示了服务器端如何配置上传路由及处理上传的图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、下载xheditor 放到程序的静态目录下(注意必须要设置静态目录app.use(express.static(path.join(__dirname, 'static'))))

2、在模板中引入以下三个文件（如果有报错换个jQuery的版本试试，第一次用11.2min的正常使用，第二次用时编辑器出现了乱码，然后又下了12.0min，不出现乱码了，但是上传图片成功窗口不会关闭（给了成功的返回值也不可以），最后用了jQuery没有压缩的原代码才ok……）

<script type="text/javascript" src="<%=host%>/xheditor/jquery/jquery.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=host%>/xheditor/xheditor-1.2.2.min.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=host%>/xheditor/xheditor_lang/zh-cn.js" charset="utf-8"></script>

3、在模板中定义textarea显示编辑器

 <textarea name="yuwen" id="content" cols="120" rows="30"></textarea>

4、配置参数
upImgUrl 是上传图片的路由

 $('#content').xheditor({
        html5Upload:false,   //这个必须设置
        tools:'full',
        skin:'default',
        width:500, height:400,
        upImgUrl:'<%=host%>/backstage/service/upload',
        upImgExt:"jpg,jpeg,gif,png"
    })

5、服务器配置upload路由
multiparty下载


//配置文件上传路由
router.post('/upload',function(req,res){
    //用的multiparty获取form表单的数据
    var form = new multiparty.Form();
    //上传路片路径，一定要设置
    form.uploadDir = './public/upload';
    form.parse(req, function(err, fields, files) {
        //console.log(files);
        var path = files.filedata[0].path;
        //一定要设置，否则上传窗口不会关闭
        res.json({'err':'','msg':Host + '/' +path})
    });
})

以下是源代码\elmbackstage\routes\management

var express = require('express');
var router = express.Router();
var multiparty = require('multiparty');
var bodyParser = require('body-parser');
var fs = require('fs');
var async = require('async');
var DB=require('../../model/db')
var Mongo=require('mongodb');
var ObjectID=Mongo.ObjectID;

//配置静态路由
router.use(express.static('./public'));
router.use('/public',express.static('./public'));

//中间件获取host
var Host = '';
router.use(function(req,res,next){
    //console.log(req.headers.host)
    var Host = 'http://'+req.headers.host;
    next();
})

//service首页查询
router.get("/",function(req,res){
    var pageSize = 20;
   // console.log(req.query.page);
    var page = req.query.page || 1;
    var totalPage = '';
    async.parallel({
        count:function(callback){
            DB.count('sevice',{},function(err,data){
                callback(err,data)
            })
        },
        data:function(callback){
            DB.find('sevice',{},{'pageSize':pageSize,'page':page},function(err,data){
                if(err){
                    console.log(err);
                    return;
                }
                callback(err,data);
            })
        }
    },function(err,result){
        res.render('./management/service/service',{
            host:Host,
            list:result.data,
            totalSize:result.count,
            totalPage:Math.ceil(result.count/pageSize),
            page:page
        });
    })

})
//添加新闻路由匹配
router.get("/add",function(req,res){

    res.render('./management/service/add',{

        host:Host
    });
})
router.post("/addPost",function(req,res){
    var form = new multiparty.Form();
    //设置上传路径
    form.uploadDir = './public/upload';
    form.parse(req, function(err, fields, files) {
        //console.log(fields);
        //console.log(files);

        var addObj = {
            'title': fields.title[0],
            'author': fields.author[0],
            'description': fields.description[0],
            'content': fields.content[0],
            'img': Host + '/' + files.image[0].path,
            'addtime': new Date().toLocaleDateString() + '/' +new Date().toLocaleTimeString()
        }
        DB.insertOne('sevice',addObj,function(err,data){
            if(err){
                console.log(err);
                return;
            }

            res.redirect(Host+'/backstage/service/');
        })
    });

})

//编辑路由匹配
router.get('/edit',function(req,res){
    var id =  req.query.id;
    //console.log(id)
    DB.find('sevice',{'_id':DB.ObjectID(id)},function(err,data){
       // console.log(data);
        res.render('./management/service/edit',{
            list:data[0],
            host:Host
        })
    })
})



//接收edit提交的数据
router.post('/editPost',function(req,res){
    var form = new multiparty.Form();
    form.uploadDir = './public/upload'

    form.parse(req, function(err, fields, files) {
       // console.log(fields)
        //获取input的隐藏id
        var id = fields.id[0];

        //originalFilename存在说明有更新照片
        if(files.image[0].originalFilename){
            var img = Host +'/'+files.image[0].path;
        }else{
            //originalFilename不存在，保留之前的照片，删掉提交的无效文件
            var img = fields.img[0];
            fs.unlink('./'+files.image[0].path);
        }
        var addObj = {
            'title': fields.title[0],
            'author': fields.author[0],
            'description': fields.description[0],
            'content': fields.content[0],
            'img': img,
            'addtime': new Date().toLocaleDateString() + '/' +new Date().toLocaleTimeString()
        }
        DB.updateOne('sevice',{'_id':DB.ObjectID(id)},addObj,function(err,data) {
            if (err) {
                console.log(err);
                return;
            }
            res.redirect(Host + '/backstage/service');

    });
})
})

//移除数据
router.get('/remove',function(req,res){
    var id =  req.query.id;
    //console.log(id)
    DB.deleteMany('sevice',{'_id':DB.ObjectID(id)},function(err,data){
       // console.log(data);
        if(err){
            console.log(err);
            return;
        }
        res.redirect(Host+'/backstage/service')

    })
})

//配置文件上传路由
router.post('/upload',function(req,res){

    var form = new multiparty.Form();
    form.uploadDir = './public/upload';
    form.parse(req, function(err, fields, files) {
           //console.log(files);
            var path = files.filedata[0].path;
            //一定要设置，否则上传窗口不会关闭
            res.json({'err':'','msg':Host + '/' +path})
        });
    })

    module.exports = router;
    ```
    模板代码

    ```
<form action="<%=host%>/backstage/service/editPost" method="post" enctype="multipart/form-data">

     <label for="title">标题</label>
     <input type="text" id="title" name="title" value="<%=list.title%>"/>
     <label for="author">作者</label>
     <input type="text" id="author" name="author" value="<%=list.author%>"/>
     <label for="description">描述</label>
     <input type="text" id="description" name="description" value="<%=list.description%>"/>
     <label for="content">内容</label>
     <textarea name="content" id="content" class="xheditor"><%-list.content%></textarea>
     <label for="image">头像</label>
     <input type="file" id="image" name="image"/>
     <input type="hidden" value="<%=list._id%>" name="id"/>
     <input type="hidden" value="<%=list.img%>" name="img"/>
     <input type="submit" value="提交" class="sub-btn"/>
</form>