富文本编辑器——kindeditor+七牛

╰+攻爆jí腚メ 2022-08-19 14:16 230阅读 0赞

项目需求：使用富文本上传图片。  
项目使用框架：Spring、SpringMVC  
在此之前选用过UEditor，问题在于，UEditor提供的包都是ueditor.XX.all.js  
发现在引用了这个包后，改了image.js，并没有什么用。  
后来随之放弃了，现在回过头来看，不是UEditor的问题，是自己使用的问题。后来再讲。  
先说说，后来使用了kindeditor，按这种方式下载，先下载utf-8 jsp版本的，然后进演示里面，查看源代码，找到kindeditor-min.js，将这个文件下载下来替换掉原来下载的kindeditor-min-all.js(具体名字不急的了)。  
使用的时候引用kindeditor-min.js这个文件就可以了。  
我想UEditor也是一样，下载一个可配置的。

接下来说说kindeditor里面配置问题。和如何与七牛一起使用。  
配置：  
/kindeditor/plugins/image/image.js，找到uploadJson，将这个修改为服务器文件上传的地址即可。  
比如我这个里面:uploadJson = “/image/upload”;  
filePostName为服务器接收文件的名字。

@Controller
    @RequestMapping
    public class ResourceController { 
    
        @RequestMapping(value = "/image/upload", method = RequestMethod.POST)
        @ResponseBody
        public Map upload(@RequestParam CommonsMultipartFile imgFile, HttpServletRequest request) throws IOException {
            String path = QiniuImageUploader.upload(imgFile.getBytes(), imgFile.getOriginalFilename()).getAbsoluteUrl();
            return map("error", 0, "url", path);
        }
    
    }

七牛集成进去：

import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    
    import com.qiniu.common.QiniuException;
    import com.qiniu.http.Response;
    import com.qiniu.storage.UploadManager;
    import com.qiniu.util.Auth;
    
    public class QiniuImageUploader { 
    
        private static Logger logger = LoggerFactory.getLogger(QiniuImageUploader.class);
        private static String DOMAIN = "http://7xq8y8.com1.z0.glb.clouddn.com/";
        private static String ACCESS_KEY = "xxxxxxxxx";
        private static String SECRET_KEY = "xxxxxxxxxxxxxxxxxxxx";
        public static String BUCKET = "image";
        private static Auth auth;
    
        static {
            auth = Auth.create(ACCESS_KEY, SECRET_KEY);
        }
    
        public static Auth getAuth() {
            return auth;
        }
    
        public static String getUpToken0() {
            return auth.uploadToken(BUCKET);
        }
    
        public static String getDomain() {
            return DOMAIN;
        }
    
        public class MyRet { 
            public long fsize;
            public String key;
            public String hash;
            public int width;
            public int height;
            public boolean isSuccess;
    
            public String getAbsoluteUrl() {
                return DOMAIN + key;
            }
        }
    
        public static MyRet upload(byte[] imageData, String rename) {
            UploadManager uploadManager = new UploadManager();
            MyRet ret = null;
            try {
                Response res = uploadManager.put(imageData, rename, getUpToken0());
                logger.info(res.bodyString());
                ret = res.jsonToObject(MyRet.class);
                ret.isSuccess = true;
            } catch (QiniuException e) {
                Response r = e.response;
                // 请求失败时简单状态信息
                try {
                    System.out.println(r.bodyString());
                } catch (QiniuException e1) {
                    e1.printStackTrace();
                }
            }
            return ret;
        }
    
    }