summernote富文本编辑器插件的用法 -- 上传图片

时间：2024-03-13 09:41:16

summernote富文本编辑器插件的用法 – 上传图片

来先来好好介绍一下什么是summernote：

Summernote富文本编辑器
一个简单，灵活，所见即所得（WYSIWYG）的编辑器，基于 jQuery 和 Bootstrap 构建。Summernote 所有主要的操作都支持快捷键，有一个功能强大的 API，它提供了大量的自定义选项的设计和功能。
附上summernote富文本框官网地址：https://summernote.org/

后来看了官网介绍，在https://summernote.org/deep-dive/#insertimage 有介绍到关于在编辑器上插入图像时的操作，在插入图片时需要用到一个callbacks的东西

不多说了，附上做出来的前后端代码

前端代码：

HTML：简单的一个div，记得还要先引用。

<div class="summernote"></div>

js：
summernote富文本编辑器插件的用法 -- 上传图片
summernote富文本编辑器插件的用法 -- 上传图片

后台

 /**
	     * @Description： 后台上传图片
	     * @param:     imgStr
	     * @Return:
	     */
		@RequestMapping(value = "/uploads",method=RequestMethod.POST,produces = { "application/json;charset=UTF-8" })
		@ResponseBody
	    public String uploads(@RequestParam(value="files",required=false) MultipartFile myfile)throws IOException
	    {
			JSONObject json = new JSONObject();
			String msg = "";
			json.put("img", "");
	        //图像数据为空
	        if (myfile == null)
	            return "error";
	        BASE64Decoder decoder = new BASE64Decoder();
	        try
	        {
	        	//原始路径
                String imagePath = "D:/passengertransport/WebRoot/image/upload";
                //虚拟的文件访问根目录
                String xuniImagePath = "/upload";
                
                //如果路径不存在就创建
                File uploadpath = new File(imagePath);
                if (!uploadpath.exists()) {
					//创建目录
                	uploadpath.mkdir();
				}
                
                //建立以时间命名的文件夹
                SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddhhmmss");
                String datepath = sdf.format(new Date());
                
                //上传文件原始名称
                String fullname = myfile.getOriginalFilename();
                //新的文件名
                String newname = UUID.randomUUID()+ fullname.substring(fullname.lastIndexOf('.'));

                File newfile = new File(imagePath+File.separator+ datepath +newname);

//                FileUtils.writeByteArrayToFile(new File(imagePath, newname),myfile.getBytes());
                myfile.transferTo(newfile);
                //最终路径
	            String zuizhonglujing =newfile+"";
	            //最终虚拟路径
	            String xuniEnd = xuniImagePath+"/" + datepath+newname;
	            
	            json.put("img", xuniEnd);
	    		return json.toString();
	        }
	        catch (Exception e)
	        {
	            return "error";
	        }
	    }

需注意：上面代码中请求数据中有用到MultipartFile，是因为在HTML最外层提交数据的时候需要一个form表单，加一句
【enctype=“multipart/form-data”】，如下图
summernote富文本编辑器插件的用法 -- 上传图片

在没有了解官方文档具体功能的前提下，讲一下我所走过的弯路：
做法一：自个儿就想着要用base64格式转成本地图片，只是保存图片路径就可以了。弊端：但是这么做的话只是单纯的获取到图片路径，一篇文章下来也不知道图片应该插在哪里。
做法二：用 $(’.summernote’).summernote(‘code’) 直接取值，在还存在图片编码是base64格式情况下将整个summernote上的内容获取下来保存到数据库。弊端：虽然能保存成功，但是base64占用的内容太大，对数据库内存不太友好。

总结：在项目里用到的一个富文本编辑器，首次接触一个全新的插件，就因为没有好好看官网文档，脱离文档自己单方面探索了解功能方面花了不少时间，到后来才知道其实接触每一个新的插件都应该好好看看它的官方文档，不然还要浪费好多时间才做出来上传图片这个事后才觉得简单的功能。

具体重点代码已经给出，有问题的可以到下方给我留言

相关文章