关于百度富文本编辑器上传图片的配置问题

首先,大家需要下载ueditor,可以找一个空的文件夹(英文命名的)

按住shift+右键打开命令窗口,运行   npm install ueditor

然后将解压的文件   public 里面的ueditor  拷贝都你的静态目录下面。

我先上我的项目的目录文件照片吧

关于百度富文本编辑器上传图片的配置问题_第1张图片关于百度富文本编辑器上传图片的配置问题_第2张图片

我的静态文件是,static,你将ueditor一整个文件放入static中,然后需要对他进行配置

打开,ueditor.config.js

关于百度富文本编辑器上传图片的配置问题_第3张图片

更改一下,我用黑色框圈起来的地方关于百度富文本编辑器上传图片的配置问题_第4张图片

 

这样配置就差不多了,然后在你的server.js文件中写入如下的代码就可以了

 

//注意顺序   先处理富文本编辑器的内容
//*********************************************************************
//富文本设置
var ueditor=require('ueditor');
//设置静态目录
server.use(express.static(__dirname+'/static'));
//设置中间件处理ueditor的后台请求
server.use("/ueditor/getImg", ueditor(path.join(__dirname, '/static'), function (req, res, next) {
    //客户端上传文件设置
    var imgDir = '/images/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 (req.query.action === 'listimage') {
        var dir_url = imgDir;
        res.ue_list(dir_url); // 客户端会列出 dir_url 目录下的所有图片
    }
    // 客户端发起其它请求
    else {
        // console.log('config.json')
        res.setHeader('Content-Type', 'application/json');
        res.redirect('/ueditor/nodejs/config.json');
    }
}));
/****************************************************************/

关于百度富文本编辑器上传图片的配置问题_第5张图片

这些地方是和刚刚配置的那个文件有关系的。

大家的服务器程序里如果有这样的代码

一定将它放置到,服务器程序的后面,不然你所有上传的文件都会被它拦截。

这样就也可以了,它上传的图片会自动保存到你,你刚刚设置的那个url下面,不需要在下面新建一个文件夹。它自动会帮你建。

希望大家也能配置成功

你可能感兴趣的:(关于百度富文本编辑器上传图片的配置问题)