Udetior使用总结

痛定思痛。 2022-07-15 13:39 22阅读 0赞

最近项目上要用到大文本的编辑以及保存，因此使用到了ueditor，关于Ueditor的初次使用配置，网上的相关文章很多，比如 [Udeitor使用][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;
        }

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

[Udeitor]: http://www.myexception.cn/web/1983627.html