java百度富文本编辑器将图片保存至本地并返显

最近在弄一个新闻发布项目,需要使用到百度富文本编辑器,使用过程中发现很多坑,趟了很久才走出来,不多说了,直接上代码

步骤1,从百度富文本官网下载源码http://ueditor.baidu.com/website/download.html#ueditor

分别下载完整源码和jsp-utf8两个版本源码

步骤2,解压jsp版本,改名为ueditor,并将其复制放入你的项目下面

修改路径,打开jsp/congfig.json文件,入下图进行修改

 

步骤3,解压源码版本,取出源码

将其复制放入你的项目src下

编写ConfigUtil类,直接上源码

import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.util.Properties;

public class ConfigUtil {
    
    private static Properties pro;
    
    static{
        pro=new Properties();
        //默认从类的所在包目录开始查找资源文件
        //如果要classpath的根目录开始找,必须加上/
        InputStream input = ConfigUtil.class.getClassLoader().getResourceAsStream("properties/config.properties");

        try {
            pro.load(new InputStreamReader(input,
                    "UTF-8"));
        } catch (IOException e) {
            e.printStackTrace();
        }finally{
            if(input!=null){
                try {
                    input.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    }
    
    public static String get(String key){
        return pro.getProperty(key);
    }

    public static int getInt(String key){
        return Integer.parseInt(pro.getProperty(key));
    }
    
    public static void main(String[] args) {
        String string = ConfigUtil.get("savepath");
        System.out.println(string);
    }

}

新建config.properties文件,如下图,存放路径可根据你自己的进行配置

修改源码,该工程项目下ctrl+h进行搜索physicalPath,找出三个需要修改的文件

分别如下图进行修改

步骤四,修改tomcat下虚拟路径,conf/

写上存放路径

步骤5,好了前台进行测试

图片显示出来了,并按照我们的要求存放在D盘目录下

 

最后特别提醒一下,图片显示前缀,需要后台写好,这里就不多说了。

 

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
以下是使用 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 集成百度富文本编辑器的步骤。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值