Udetior使用总结

最新推荐文章于 2025-03-19 10:22:15 发布

熊猫都爱吃

最新推荐文章于 2025-03-19 10:22:15 发布

阅读量1.7k

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/jjddrushi/article/details/52911913

版权

前端专栏收录该内容

1 篇文章

订阅专栏

本文主要介绍了Ueditor在项目中的应用，包括如何引入js文件和jquery，配置ueditor.config.js，以及如何自定义Controller处理ueditor的请求。特别强调了图片上传功能的实现，需要配置Servlet并在config.json中设定相关参数。

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

最近项目上要用到大文本的编辑以及保存，因此使用到了ueditor，关于Ueditor的初次使用配置，网上的相关文章很多，比如 Udeitor使用。这里就不列举了，下面主要说一下我的个人理解。
Ueditor提供了一系列的文件以支持它的功能，只需引入它的js文件以及jquery文件，就可以使用，当然对于ueditor.config.js

 var URL = window.UEDITOR_HOME_URL || getUEBasePath();

    /**
     * 配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。
     */
    window.UEDITOR_CONFIG = {

        //为编辑器实例添加一个路径，这个不能被注释
        UEDITOR_HOME_URL: URL

        // 服务器统一请求接口路径
        , serverUrl: URL + "jsp/controller.jsp"
//        , serverUrl: "/ice/ued/config"

这里默认用它自带的jsp文件作为整个组件的默认Controller，当然你也可以在自己的Controller中写一个方法来接收这个请求，但要注意语法，要使用和原Controller中的语句相同的语法。比如：用out返回。
这个配置好，基本功能就有了，接下来，要实现图片上传的功能。

要实现Ueditor的各种功能要有其相应的Servlet，并在config.json文件里进行相应的配置
比如：

 /* 上传图片配置项 */
    "imageActionName": "/ued/source/upload", /* 执行上传图片的action名称 */
    "imageFieldName": "upfile", /* 提交的图片表单名称 */
    "imageMaxSize": 2048000, /* 上传大小限制，单位B */
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
    "imageCompressEnable": true, /* 是否压缩图片,默认是true */
    "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
    "imageInsertAlign": "none", /* 插入的图片浮动方式 */
    "imageUrlPrefix": "", /* 图片访问路径前缀，这里可以配置为http://localhost:8080,但不推荐，毕竟测试环境和正式环境的项目路径一般不相同*/
    "imagePathFormat": "/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

下面是Servlet

@RequestMapping(value = "/source/upload")
    public Map<String, Object> uploadimage(MultipartFile upfile){
        Map<String, Object> params = new HashMap<String, Object>();  
        try{  

            String basePath = UploadResourceLocation.UEDITOR_PIC_PATH;//物理路径
            String visitUrl = UploadResourceLocation.UEDITOR_PIC_URI;//服务器路径
            //为了方便的上传和管理图片，我在服务器中配置了专门的图片存取路径。即在tomcat
            //的server.xml中添加一句 <Context docBase="d:/assets" path="/assets" reloadable="true"/>
            String ext;
            String name = upfile.getOriginalFilename();
            if(name == null || "".equals(name) || !name.contains("."))  
                ext = "";  
            else{
                ext = name.substring(name.lastIndexOf(".")+1);
            }
            String fileName = String.valueOf(System.currentTimeMillis()).concat("_").concat(String.valueOf(RandomUtils.nextInt(0, 6))).concat(".").concat(ext);  
            StringBuilder sb = new StringBuilder();  
            //拼接保存路径  
            sb.append(basePath).append(fileName);  
            visitUrl = visitUrl.concat(fileName);  
            File f = new File(sb.toString());
            if(!f.exists()){
                f.getParentFile().mkdirs();
            }
            OutputStream out = new FileOutputStream(f);
            FileCopyUtils.copy(upfile.getInputStream(), out);
            params.put("state", "SUCCESS");
            params.put("url", visitUrl);
            params.put("size", upfile.getSize());
            params.put("original", fileName);
            params.put("type", upfile.getContentType());
       } catch (Exception e){
           params.put("state", "ERROR");
       }
        return params;
    }

这样，图片上传功能就好了，