发布文章功能里面最重要的就是需要集成富文本编辑器，目前富文本编辑器有很多，例如ueditor，CKEditor、editor.md等。这里守望博客里面是集成的editor.md，因为editor.md是markdown格式，目前markdown由于简洁好用，在各种云笔记、github等中得到了广泛使用。
1、集成editor.mdeditor.md是在github上开源，开源地址为：https://github.com/pandao/editor.md，下载其发布的最新版本，即：
解压后，将相应的文章添加到系统中，即：
将这些docs、examples、tests文件夹是删除了的，因为这些文件夹里面的文件是不需要用到的。
页面中需要引用的文件如下：
<link href="http://www.likecs.com/${rc.contextPath}/static/plugins/editor/css/editormd.min.css"> <script src="http://www.likecs.com/${rc.contextPath}/static/plugins/editor/editormd.min.js" type="text/javascript"></script>页面中只需要引入editor.md中的editormd.min.css和editormd.min.js文件（注意：对于jquery相关的引用是提前就引用好的）。
页面中需要插入富文本编辑器的地方代码如下：
<div> <div> <textarea></textarea> </div> </div>注意标签中有一个id值为article-editormd，后面初始化富文本编辑器时，需要用到。
初始化富文本编辑器的代码如下：
var editor; $(function () { editor = editormd("article-editormd", { width: "100%", height: 640, placeholder: '', syncScrolling: "single", path: "${rc.contextPath}/static/plugins/editor/lib/", saveHTMLToTextarea: true, imageUpload: true, imageFormats: ["jpg", "jpeg", "gif", "png", "bmp"], imageUploadURL: "${rc.contextPath}/upload?_distType=_articleImg", imageUploadFileName: "_uploadFile", toolbarIcons: "sw" }); });注意：
其中imageUploadFileName参数名，是我扩展的，原生的editor.md是没有这个参数的。扩展这个参数的原因是因为editor.md中对于上传图片的文件名为editormd-image-file，由于守望博客中对于上传模块进行统一抽象，即上传名称统一为_uploadFile，为此就扩展了这个参数进行修改上传图片的文件名。
对于toolbarIcons参数的参数值，也是我扩展的，因为原生的editor.md工具栏的种类只有3种，即：full、simple、mini。这样导致工具栏要么太多了，要么太少了，所以就再定义一个sw，里面工具就是自己想要的工具，即：
sw : [ "undo", "redo", "|", "bold", "del", "italic", "quote", "|", "h1", "h2", "h3", "h4", "h5", "h6", "|", "list-ul", "list-ol", "hr", "|", "link", "image", "code", "preformatted-text", "code-block", "table", "html-entities", "|", "watch", "preview", "clear", "search" ]最终富文本编辑器页面效果如下：
处理文章图片的UploadGroupLogoHandler，内容为：
/** * 上传专栏Logo处理类 * * @author lzj * @since 1.0 * @date [2019-07-23] */ @Slf4j @Component("_groupLogo") public class UploadGroupLogoHandler implements IUploadHandler { @Resource(name = "configCache") private ICache<Config> configCache; @Override public Object upload(MultipartFile file, String distType, String userId) throws Exception { Map<String, Object> result = new HashMap<String, Object>(); try { // 获取图片的原始名称 String originalName = file.getOriginalFilename(); // 判断图片的类型 if (!(originalName.endsWith(".jpg") || originalName.endsWith(".JPG") || originalName.endsWith(".png") || originalName.endsWith(".PNG") || originalName.endsWith(".gif") || originalName.endsWith(".GIF") || originalName.endsWith(".jpeg") || originalName.endsWith(".JPEG"))) { throw new TipException("您上传的图片类型有误，请上传格式为jpg、png或gif"); } // 获取图片的大小 long fileSize = file.getSize(); // 图片大小不能超过2M, 2M = 2 * 1024 * 1024B = 2097152B if (fileSize > 2097152L) { throw new TipException("您上传的图片超过2M"); } Config config = configCache.get(Config.CONFIG_IMG_GROUP_LOGO_PATH); // 保存头像的根目录 String basePath = config.getConfigValue(); if (!(basePath.endsWith("http://www.likecs.com/") || basePath.endsWith("\\"))) { basePath += "http://www.likecs.com/"; } // 根据当前时间构建yyyyMM的文件夹，建立到月的文件夹 String dateDirName = DateUtil.date2Str(new Date(), DateUtil.YEAR_MONTH_FORMAT); basePath += dateDirName; File imageDir = new File(basePath); if (!imageDir.exists()) { imageDir.mkdirs(); } String fileNewName = IdGenarator.guid() + originalName.substring(originalName.lastIndexOf(".")); FileUtil.copy(file.getInputStream(), new FileOutputStream(new File(imageDir, fileNewName))); result.put("url", dateDirName + "http://www.likecs.com/" + fileNewName); result.put("msg", "上传成功"); } catch (TipException e) { result.put("url", ""); result.put("msg", e.getMessage()); } catch (Exception e) { log.error("上传失败", e); result.put("url", ""); result.put("msg", "上传失败"); } return result; } @Override public void download(String fileId, HttpServletResponse response) throws Exception { } @Override public Object list(String distType, String userId) throws Exception { return null; } }