Bootstrap 可视化HTML编辑器，summernote

た入场券 2021-09-10 22:24 372阅读 0赞

**Bootstrap 可视化HTML编辑器之summernote**，用其官网上的介绍就是“Super Simple WYSIWYG editor”，不过在我看来，与bootstrap中文官网上提供的“bootstrap-wysiwyg”要更simple，更漂亮，更好用！

虽然我之前尝试过使用bootstrap-wysiwyg，可参照[Bootstrap wysiwyg富文本数据如何保存到mysql][Bootstrap wysiwyg_mysql]，但事后诸葛亮的经验告诉我，summernote绝对是更佳的富文本编辑器，这里对其工作team点三十二个赞！！！！！

经过一天时间的探索，对summernote有所掌握，那么为了更广大前端爱好者提供便利，我将费劲一番心血来介绍一下summernote，超级福利啊。

\#\#一、官方API和源码下载  
工欲善其事必先利其器，首先把summernote的源码拿到以及对应官方API告诉大家是首个任务！

[官网（demo和api）][demo_api]  
[github源码下载][github]，注意下载开发版

\#\#二、效果图  
效果图1  
![效果图3][3]

效果图2  
![效果图2][2]

效果图3  
![效果图1][1]

\#\#三、开讲内容  
大的方向为以下三个内容：

1.  summernote的页面布局（资源引入、初始参数）
2.  summernote从本地上传图片方法（前端onImageUpload方法、后端springMVC文件保存）
3.  summernote所在form表单的数据提交

\#\#\#①、summernote的页面布局

<!DOCTYPE html>
    <html lang="zh-CN">
    <%@ include file="/components/common/taglib.jsp"%>
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
      <title>summernote - bs3fa4</title>
    
      
    <script type="text/javascript" src="${ctx}/components/jquery/jquery.js"></script>
    
      
     <link type="text/css" rel="stylesheet" href="${ctx}/components/bootstrap/css/bootstrap.css" />
    <script type="text/javascript" src="${ctx}/components/bootstrap/js/bootstrap.min.js"></script>
    
      
    <link type="text/css" rel="stylesheet" href="${ctx}/components/summernote/summernote.css" />
    <script type="text/javascript" src="${ctx}/components/summernote/summernote.js"></script>
    <script type="text/javascript" src="${ctx}/components/summernote/lang/summernote-zh-CN.js"></script>
    
      <script type="text/javascript">
        $('div.summernote').each(function() {
    		var $this = $(this);
    		var placeholder = $this.attr("placeholder") || '';
    		var url = $this.attr("action") || '';
    		$this.summernote({
    			lang : 'zh-CN',
    			placeholder : placeholder,
    			minHeight : 300,
    			dialogsFade : true,// Add fade effect on dialogs
    			dialogsInBody : true,// Dialogs can be placed in body, not in
    			// summernote.
    			disableDragAndDrop : false,// default false You can disable drag
    			// and drop
    			callbacks : {
    				onImageUpload : function(files) {
    					var $files = $(files);
    					$files.each(function() {
    						var file = this;
    						var data = new FormData();
    						data.append("file", file);
    
    						$.ajax({
    							data : data,
    							type : "POST",
    							url : url,
    							cache : false,
    							contentType : false,
    							processData : false,
    							success : function(response) {
    								var json = YUNM.jsonEval(response);
    								YUNM.debug(json);
    								YUNM.ajaxDone(json);
    
    								if (json[YUNM.keys.statusCode] == YUNM.statusCode.ok) {
    									// 文件不为空
    									if (json[YUNM.keys.result]) {
    										var imageUrl = json[YUNM.keys.result].completeSavePath;
    										$this.summernote('insertImage', imageUrl, function($image) {
    
    										});
    									}
    								}
    
    							},
    							error : YUNM.ajaxError
    						});
    					});
    				}
    			}
    		});
    	});
      </script>
    </head>
    <body>
    <div class="container">
    	<form class="form-horizontal required-validate" action="#" enctype="multipart/form-data" method="post" οnsubmit="return iframeCallback(this, pageAjaxDone)">
    	<div class="form-group">
    		<label for="" class="col-md-2 control-label">项目封面</label>
    		<div class="col-md-8 tl th">
    			<input type="file" name="image" class="projectfile" value="${deal.image}"/>
    			<p class="help-block">支持jpg、jpeg、png、gif格式，大小不超过2.0M</p>
    		</div>
    	</div>
    	
    	  <div class="form-group">
    		<label for="" class="col-md-2 control-label">项目详情</label>
    		<div class="col-md-8">
    			<div class="summernote" name="description" placeholder="请对项目进行详细的描述，使更多的人了解你的" action="${ctx}/file">${deal.description}</div>
    		</div>
    	</div>
    	</form>
    </div>
    </body>
    </html>

*  `<!DOCTYPE html>`html5的标记是必须的，注意千万不能是`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`这种doctype，否则summernote的组件显示怪怪的，按钮的大小布局不一致，这里就不再上图了，但是千万注意！
 *  bootstrap 的版本号最好为v3.3.5

\#\#\#\#1、布局div

<div class="summernote" name="description" placeholder="请对项目进行详细的描述，使更多的人了解你的" action="${ctx}/file">${deal.description}</div>

相信你也看到了我为div加上的三个属性name、placeholder、action，那么我们来详细介绍一下三个属性的作用：

1.  name，为外层form表单提供summernote数据保存时的数据模型的属性名，和input标签的name属性作用一致，稍候在form提交的时候具体介绍。
2.  placeholder，很直白，为summernote提供初始状态的文本描述，当然还需要后续加工，div显然是不支持placeholder属性的。
3.  action，为图片上传提供后端接收地址，稍候在介绍图片上传onImageUpload会再次用到。

另外$\{deal.description\}其实你不需要太多关注，和textarea的赋值的用法一致，就是单纯的显示保存后的内容。

\#\#\#\#2、summernote初始化

$('div.summernote').each(function() { 
    		var $this = $(this);
    		var placeholder = $this.attr("placeholder") || '';
    		var url = $this.attr("action") || '';
    		$this.summernote({ 
    			lang : 'zh-CN',
    			placeholder : placeholder,
    			minHeight : 300,
    			dialogsFade : true,// Add fade effect on dialogs
    			dialogsInBody : true,// Dialogs can be placed in body, not in
    			// summernote.
    			disableDragAndDrop : false,// default false You can disable drag
    			// and drop
    		});
    	});

使用jquery获取到页面上的summernote，对其进行初始化，我们来详细介绍列出参数的用法（先不介绍图片上传的onImageUpload 方法）。

1.  lang ，指定语言为中文简体
2.  placeholder ，summernote初始化显示的内容。
3.  minHeight，最小高度为300，注意这里没有使用height，是有原因的，这里稍作解释，就不上图了。当使用height指定高度后，假如上传比height高的图片，summernote就不会自动调整高度，并且前文中“效果图3”中标出的红色区域会不贴着图片，而溢出到summernote外部。
4.  dialogsFade，增加summernote上弹出窗口滑进滑出的动态效果。
5.  dialogsInBody，这个属性也很关键，默认为false，字面上的意思是summernote的弹出框是否在body中（in嘛），设置为false时，dialog的式样会继承其上一级外部（如上文中的form-horizontal）容器式样，那么显示的效果就很别扭，这里也不再上图；那么设置为true时，就不会继承上一级外部div的属性啦，从属于body嘛。
6.  disableDragAndDrop，设置为false吧，有的时候拖拽会出点问题，你可实践。

\#\#\#②、summernote从本地上传图片方法  
\#\#\#\#1、前端onImageUpload方法

假如问度娘如下的话：“onImageUpload方法怎么写？”，度娘大多会为你找到如下回答：

$(\'.summernote\').summernote({ 
        height:300,
        onImageUpload: function(files, editor, welEditable) { 
         sendFile(files[0],editor,welEditable);
        }
       });
     });
    
    function sendFile(file, editor, welEditable) { 
        data = new FormData();
        data.append("file", file);
        url = "http://localhost/spichlerz/uploads";
        $.ajax({ 
            data: data,
            type: "POST",
            url: url,
            cache: false,
            contentType: false,
            processData: false,
            success: function (url) { 
                editor.insertImage(welEditable, url);
            }
        });
    }
    </script>

> 以上资源来自于stackoverflow。

但其实呢，summernote-develop版本的summernote已经不支持这种onImageUpload写法，那么如今的写法是什么样子呢？参照summernote的官网例子。

> onImageUpload

> Override image upload handler(default: base64 dataURL on IMG tag). You can upload image to server or AWS S3: more…

// onImageUpload callback
    $('#summernote').summernote({ 
      callbacks: { 
        onImageUpload: function(files) { 
          // upload image to server and create imgNode...
          $summernote.summernote('insertNode', imgNode);
        }
      }
    });
    
    // summernote.image.upload
    $('#summernote').on('summernote.image.upload', function(we, files) { 
      // upload image to server and create imgNode...
      $summernote.summernote('insertNode', imgNode);
    });

那么此时onImageUpload的具体写法呢？（后端为springMVC）：

callbacks : { 
    	// onImageUpload的参数为files，summernote支持选择多张图片
    	onImageUpload : function(files) { 
    		var $files = $(files);
    		
    		// 通过each方法遍历每一个file
    		$files.each(function() { 
    			var file = this;
    			// FormData，新的form表单封装，具体可百度，但其实用法很简单，如下
    			var data = new FormData();
    			
    			// 将文件加入到file中，后端可获得到参数名为“file”
    			data.append("file", file);
    
    			// ajax上传
    			$.ajax({ 
    				data : data,
    				type : "POST",
    				url : url,// div上的action
    				cache : false,
    				contentType : false,
    				processData : false,
    				
    				// 成功时调用方法，后端返回json数据
    				success : function(response) { 
    					// 封装的eval方法，可百度
    					var json = YUNM.jsonEval(response);
    					
    					// 控制台输出返回数据
    					YUNM.debug(json);
    					
    					// 封装方法，主要是显示错误提示信息
    					YUNM.ajaxDone(json);
    
    					// 状态ok时
    					if (json[YUNM.keys.statusCode] == YUNM.statusCode.ok) { 
    						// 文件不为空
    						if (json[YUNM.keys.result]) { 
    							
    							// 获取后台数据保存的图片完整路径
    							var imageUrl = json[YUNM.keys.result].completeSavePath;
    							
    							// 插入到summernote
    							$this.summernote('insertImage', imageUrl, function($image) { 
    								// todo，后续可以对image对象增加新的css式样等等，这里默认
    							});
    						}
    					}
    
    				},
    				// ajax请求失败时处理
    				error : YUNM.ajaxError
    			});
    		});
    	}
    }

注释当中加的很详细，这里把其他关联的代码一并贴出，仅供参照。

debug : function(msg) { 
    		if (this._set.debug) { 
    			if (typeof (console) != "undefined")
    				console.log(msg);
    			else
    				alert(msg);
    		}
    	},
    jsonEval : function(data) { 
    		try { 
    			if ($.type(data) == 'string')
    				return eval('(' + data + ')');
    			else
    				return data;
    		} catch (e) { 
    			return { };
    		}
    	},
    	ajaxError : function(xhr, ajaxOptions, thrownError) { 
    		if (xhr.responseText) { 
    			$.showErr("<div>" + xhr.responseText + "</div>");
    		} else { 
    			$.showErr("<div>Http status: " + xhr.status + " " + xhr.statusText + "</div>" + "<div>ajaxOptions: " + ajaxOptions + "</div>"
    					+ "<div>thrownError: " + thrownError + "</div>");
    		}
    
    	},
    	ajaxDone : function(json) { 
    		if (json[YUNM.keys.statusCode] == YUNM.statusCode.error) { 
    			if (json[YUNM.keys.message]) { 
    				YUNM.debug(json[YUNM.keys.message]);
    				$.showErr(json[YUNM.keys.message]);
    			}
    
    		} else if (json[YUNM.keys.statusCode] == YUNM.statusCode.timeout) { 
    			YUNM.debug(json[YUNM.keys.message]);
    			$.showErr(json[YUNM.keys.message] || YUNM.msg("sessionTimout"), YUNM.loadLogin);
    		}
    	},

\#\#\#\#2、后端springMVC文件保存

\#\#\#\#\#2.1、为springMVC增加文件的配置

这里就不做过多介绍了，可参照我之前写的[SpringMVC之context-dispatcher.xml，了解基本的控制器][SpringMVC_context-dispatcher.xml]

\#\#\#\#\#2.2、FileController.java

package com.honzh.spring.controller;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import org.apache.log4j.Logger;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    import com.honzh.common.base.UploadFile;
    import com.honzh.spring.service.FileService;
    
    @Controller
    @RequestMapping(value = "/file")
    public class FileController extends BaseController { 
    	private static Logger logger = Logger.getLogger(FileController.class);
    
    	@Autowired
    	private FileService fileService;
    
    	@RequestMapping("")
    	public void index(HttpServletRequest request, HttpServletResponse response) { 
    		logger.debug("获取上传文件...");
    		try { 
    			UploadFile uploadFiles = fileService.saveFile(request);
    
    			renderJsonDone(response, uploadFiles);
    		} catch (Exception e) { 
    			logger.error(e.getMessage());
    			logger.error(e.getMessage(), e);
    			renderJsonError(response, "文件上传失败");
    		}
    	}
    
    }

\#\#\#\#\#2.3、FileService.java

package com.honzh.spring.service;
    
    import java.io.IOException;
    import java.util.Iterator;
    import java.util.Map;
    import java.util.Random;
    
    import javax.servlet.http.HttpServletRequest;
    
    import org.apache.commons.io.FileUtils;
    import org.apache.log4j.Logger;
    import org.springframework.stereotype.Service;
    import org.springframework.web.multipart.MultipartFile;
    import org.springframework.web.multipart.MultipartHttpServletRequest;
    
    import com.honzh.common.Variables;
    import com.honzh.common.base.UploadFile;
    import com.honzh.common.util.DateUtil;
    
    @Service
    public class FileService { 
    	private static Logger logger = Logger.getLogger(FileService.class);
    
    	public UploadFile saveFile(HttpServletRequest request) throws IOException { 
    		logger.debug("获取上传文件...");
    
    		// 转换为文件类型的request
    		MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
    
    		// 获取对应file对象
    		Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
    		Iterator<String> fileIterator = multipartRequest.getFileNames();
    
    		// 获取项目的相对路径（http://localhost:8080/file）
    		String requestURL = request.getRequestURL().toString();
    		String prePath = requestURL.substring(0, requestURL.indexOf(Variables.ctx));
    
    		while (fileIterator.hasNext()) { 
    			String fileKey = fileIterator.next();
    			logger.debug("文件名为：" + fileKey);
    
    			// 获取对应文件
    			MultipartFile multipartFile = fileMap.get(fileKey);
    
    			if (multipartFile.getSize() != 0L) { 
    
    				validateImage(multipartFile);
    
    				// 调用saveImage方法保存
    				UploadFile file = saveImage(multipartFile);
    				file.setPrePath(prePath);
    
    				return file;
    			}
    		}
    
    		return null;
    	}
    
    	private UploadFile saveImage(MultipartFile image) throws IOException { 
    		String originalFilename = image.getOriginalFilename();
    		logger.debug("文件原始名称为:" + originalFilename);
    		
    		String contentType = image.getContentType();
    		String type = contentType.substring(contentType.indexOf("/") + 1);
    		String fileName = DateUtil.getCurrentMillStr() + new Random().nextInt(100) + "." + type;
    
    		// 封装了一个简单的file对象，增加了几个属性
    		UploadFile file = new UploadFile(Variables.save_directory, fileName);
    		file.setContentType(contentType);
    		logger.debug("文件保存路径：" + file.getSaveDirectory());
    		
    		// 通过org.apache.commons.io.FileUtils的writeByteArrayToFile对图片进行保存
    		FileUtils.writeByteArrayToFile(file.getFile(), image.getBytes());
    
    		return file;
    	}
    
    	private void validateImage(MultipartFile image) { 
    	}
    }

\#\#\#\#\#2.4、UploadFile.java

package com.honzh.common.base;
    
    import java.io.File;
    
    import com.honzh.common.Variables;
    
    public class UploadFile { 
    	private String saveDirectory;
    	private String fileName;
    	private String contentType;
    	private String prePath;
    	private String completeSavePath;
    	private String relativeSavePath;
    
    	public UploadFile(String saveDirectory, String filesystemName) { 
    		this.saveDirectory = saveDirectory;
    		this.fileName = filesystemName;
    	}
    
    	public String getFileName() { 
    		return fileName;
    	}
    
    	public String getSaveDirectory() { 
    		return saveDirectory;
    	}
    
    	public String getContentType() { 
    		return contentType;
    	}
    
    	public void setContentType(String contentType) { 
    		this.contentType = contentType;
    	}
    
    	public String getPrePath() { 
    		if (prePath == null) { 
    			return "";
    		}
    		return prePath;
    	}
    
    	public void setPrePath(String prePath) { 
    		this.prePath = prePath;
    		setCompleteSavePath(prePath + getRelativeSavePath());
    	}
    
    	public String getCompleteSavePath() { 
    		return completeSavePath;
    	}
    
    	public void setCompleteSavePath(String completeSavePath) { 
    		this.completeSavePath = completeSavePath;
    	}
    
    	public String getRelativeSavePath() { 
    		return relativeSavePath;
    	}
    
    	public void setRelativeSavePath(String relativeSavePath) { 
    		this.relativeSavePath = relativeSavePath;
    	}
    
    	public void setSaveDirectory(String saveDirectory) { 
    		this.saveDirectory = saveDirectory;
    	}
    
    	public void setFileName(String fileName) { 
    		this.fileName = fileName;
    	}
    
    	public File getFile() { 
    		if (getSaveDirectory() == null || getFileName() == null) { 
    			return null;
    		} else { 
    			setRelativeSavePath(Variables.ctx + "/" + Variables.upload + "/" + getFileName());
    			return new File(getSaveDirectory() + "/" + getFileName());
    		}
    	}
    }

后端文件保存方法也非常简单，懂java的同学都可以看得懂，那么对于后端不使用springmvc的同学，你可以再找找方法。

--------------------

辛苦的介绍完前两节后，我们来一个动态图看一下效果吧！  
![这里写图片描述][20160331165312279]

\#\#\#③. summernote所在form表单的数据提交  
这里，我们再回顾一下summernote所在的form表单，其中还包含了一个普通file的input标签，也就是说，该form还需要上传一张项目封面。

先看一下form的属性：

1.  enctype：“multipart/form-data”，表明为文件类型的form保存
2.  iframeCallback方法，稍候详细介绍，主要是对有文件上传的form表单进行封装。

\#\#\#\#1、iframeCallback

贴上全部代码以供参考，但是这里我们只讲以下部分：

// 富文本编辑器
    	$("div.summernote", $form).each(function() { 
    		var $this = $(this);
    
    		if (!$this.summernote('isEmpty')) { 
    			var editor = "<input type='hidden' name='" + $this.attr("name") + "' value='" + $this.summernote('code') + "' />";
    			$form.append(editor);
    		} else { 
    			$.showErr("请填写项目详情");
    			return false;
    		}
    
    	});

*  通过form获取到summernote对象 t h i s 后 ， 通 过 ‘ ‘ ‘ ! this 后，通过\`\`\`! this后，通过‘‘‘!this.summernote(‘isEmpty’)\`\`\`来判断用户是否对富文本编辑器有内容上的填写，保证不为空，为空时，就弹出提示信息。
 *  `$this.summernote('code')`可获得summernote编辑器的html内容，将其封装到input对象中，name为前文中div提供的name，供后端使用。

这里其他地方就不做多解释了，详细可参照[Bootstrap wysiwyg富文本数据如何保存到mysql][Bootstrap wysiwyg_mysql]。

保存到数据库中是什么样子呢？

<p><img src="http://localhost:8080/ymeng/upload/2016033117093076.jpeg" style=""></p><p><br></p><p>你好，有兴趣可以加入到沉默王二的群啊<br></p>

页面效果为：

![这里写图片描述][20160331171209380]

--------------------

\#\#\#\#2、新版iframeCallback方法

比对之前的代码，可以发现代码有两处发生了变化：

1.  当summernote为空时，之前没有做在bootstrap的validator中，是因为还没有搞清楚summernote这种非input标签在validator中的使用，下面会做详细说明。
2.  对summernote的内容加上了base64编码处理，这会有很多好处，稍候介绍。

#### 3、base64的使用方法 ####

js端我在[Bootstrap wysiwyg富文本数据如何保存到mysql][Bootstrap wysiwyg_mysql]这篇文章中做了说明，此处不再说明。

可能会有同学需要javascript端的base64编码，而需要在springMVC后端使用base64的解码，那么此处介绍一个jar包（[Java Base64.jar][]），使用方法很简单，下载好jar包后，就可以使用如下方法解码：

import it.sauronsoftware.base64.Base64;
    
    deal.setDescription(StringEscapeUtils.escapeHtml(Base64.decode(description, "utf-8")));

1.  首先，base64的import如上，来自于javabase64.jar包。
2.  decode的编码前端js使用的utf-8，此处自然也用utf-8。
3.  至于StringEscapeUtils类，也是一个非常实用的工具类，有兴趣的可详细关注一下（主要可以对html等等特殊标签进行转义）。

\#\#\#\#4、summernote加入到bootstrap validator中

<div class="form-group">
    	<label for="" class="col-md-1 control-label">项目详情</label>
    	<div class="col-md-10">
    		<div class="summernote" name="description" data-bv-excluded="false" data-bv-notempty placeholder="请对项目进行详细的描述，使更多的人了解你的云梦"
    			action="${ctx}/file">${deal.description}</div>
    	</div>
    </div>

1.  注意data-bv-excluded=“false”（由于summernote使用了div作为form表单的呈现形式，非一般的input标签，所以此处要将该name="description"的field标识为非excluded，默认的validator是不对“\[’:disabled’, ‘:hidden’, ‘:not(:visible)’\]”三种标签做处理的，而summernote会默认作为disabled的一种，那么设置上data-bv-excluded=“false” 后，validator将会对summernote做非空的判断）、data-bv-notempty属性。
2.  当然有了上述两个属性后，并不能保证validator的有效性，那么接下来，请继续看。

onChange : function(contents, $editable) { 
    
    	if ($this.parents().length > 0) { 
    		var $form = $this.parents().find("form.required-validate", $p);
    
    		if ($form.length > 0) { 
    			var data = $form.data('bootstrapValidator');
    
    			YUNM.debug($this.summernote('isEmpty'));
    			if ($this.summernote('isEmpty')) { 
    				data.updateStatus($this.attr("name"), 'INVALID');
    			} else { 
    				data.updateStatus($this.attr("name"), 'VALID');
    			}
    		}
    	}
    
    },
    onInit : function() { 
    	if ($this.parents().length > 0) { 
    		var $form = $this.parents().find("form.required-validate", $p);
    
    		if ($form.length > 0) { 
    			var data = $form.data('bootstrapValidator');
    
    			if (!$this.summernote('isEmpty')) { 
    				data.updateStatus($this.attr("name"), 'VALID');
    			}
    		}
    	}
    },

在summernote的callbacks中加入onChange 、onInit，当文本域发生变化、初始化时，对summernote在form中的验证字段进行状态的更新，validator中使用updateStatus方法。

/** * Update all validating results of field * * @param {String|jQuery} field The field name or field element * @param {String} status The status. Can be 'NOT_VALIDATED', 'VALIDATING', 'INVALID' or 'VALID' * @param {String} [validatorName] The validator name. If null, the method updates validity result for all validators * @returns {BootstrapValidator} */
      updateStatus: function(field, status, validatorName) {

OK，等补上以上两个内容后，整个summernote就完整了。

--------------------

![20190430093935456.jpg][]

[Bootstrap wysiwyg_mysql]: http://blog.csdn.net/qing_gee/article/details/49331543
[demo_api]: http://summernote.org/
[github]: https://github.com/summernote/summernote/
[3]: /images/20210506/ee4655b449b545e6b32e7ec6f0f3ca26.png
[2]: /images/20210506/96cd750d926943a5867d3a1f57532527.png
[1]: /images/20210506/9d10e68957c141e999f3507b4ed432ac.png
[SpringMVC_context-dispatcher.xml]: http://blog.csdn.net/qing_gee/article/details/50895295
[20160331165312279]: /images/20210506/b29ef58fafdd44798988fe836421b8f6.png
[20160331171209380]: /images/20210506/2e711699f4474c3692662909ea782b99.png
[Java Base64.jar]: https://sourceforge.net/projects/java-base64/?source=typ_redirect
[20190430093935456.jpg]: /images/20210506/dc5e3906779c44dc89af4b46718ebf59.png