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

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

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

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

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

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

打开,ueditor.config.js

更改一下,我用黑色框圈起来的地方

 

这样配置就差不多了,然后在你的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');
    }
}));
/****************************************************************/

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

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

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

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

希望大家也能配置成功

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是使用 Spring Boot 集成百度富文本编辑器的步骤: 1. 在 pom.xml 中添加以下依赖: ```xml <dependency> <groupId>com.baidu</groupId> <artifactId>ueditor</artifactId> <version>1.1.2</version> </dependency> ``` 2. 将 ueditor.config.js 和 ueditor.all.min.js 等文件放到 src/main/resources/static/ueditor/ 目录下。 3. 在 application.properties 中添加以下配置: ```properties # 配置 UEditor 插件的路径 ueditor.config=/ueditor/ueditor.config.js ueditor.upload.path=/ueditor/upload/ ``` 4. 创建一个 UEditorController,用于处理 UEditor 的请求: ```java @Controller public class UEditorController { @GetMapping("/ueditor") public String ueditor() { return "ueditor"; } @PostMapping("/ueditor") @ResponseBody public String upload(HttpServletRequest request) throws Exception { request.setCharacterEncoding("utf-8"); String rootPath = request.getServletContext().getRealPath("/"); return new ActionEnter(request, rootPath).exec(); } } ``` 5. 编写一个 ueditor.html 文件,用于展示 UEditor 编辑器: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>UEditor Demo</title> <!-- 配置 UEditor 插件的路径 --> <script type="text/javascript" src="/ueditor/ueditor.config.js"></script> <script type="text/javascript" src="/ueditor/ueditor.all.min.js"></script> </head> <body> <script id="editor" type="text/plain" style="width:100%;height:500px;"></script> <script type="text/javascript"> var editor = UE.getEditor('editor'); </script> </body> </html> ``` 6. 启动应用程序,访问 http://localhost:8080/ueditor 即可看到 UEditor 编辑器页面。 7. 在 UEditor 编辑器中输入内容并保存,上传的图片和文件会保存在项目的 ueditor/upload/ 目录下。 以上就是使用 Spring Boot 集成百度富文本编辑器的步骤。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值