發(fā)布文章功能里面最重要的就是需要集成富文本編輯器赡磅，目前富文本編輯器有很多滞项，例如ueditor埠况，CKEditor、editor.md等纵诞。這里守望博客里面是集成的editor.md，因為editor.md是markdown格式培遵，目前markdown由于簡潔好用浙芙，在各種云筆記、github等中得到了廣泛使用籽腕。

1嗡呼、集成editor.md

editor.md是在github上開源，開源地址為：https://github.com/pandao/editor.md皇耗，下載其發(fā)布的最新版本南窗，即：

001.png

解壓后，將相應(yīng)的文章添加到系統(tǒng)中郎楼，即：

002.png

將這些docs万伤、examples、tests文件夾是刪除了的呜袁，因為這些文件夾里面的文件是不需要用到的敌买。

頁面中需要引用的文件如下：

<link href="${rc.contextPath}/static/plugins/editor/css/editormd.min.css" rel="stylesheet">
<script src="${rc.contextPath}/static/plugins/editor/editormd.min.js" type="text/javascript"></script>

頁面中只需要引入editor.md中的editormd.min.css和editormd.min.js文件（注意：對于jquery相關(guān)的引用是提前就引用好的）。

頁面中需要插入富文本編輯器的地方代碼如下：

<div class="form-group">
    <div class="col-sm-12" id="article-editormd">
        <textarea style="display:none;"></textarea>
    </div>
</div>

注意標(biāo)簽中有一個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參數(shù)名，是我擴(kuò)展的芙粱，原生的editor.md是沒有這個參數(shù)的祭玉。擴(kuò)展這個參數(shù)的原因是因為editor.md中對于上傳圖片的文件名為editormd-image-file，由于守望博客中對于上傳模塊進(jìn)行統(tǒng)一抽象宅倒，即上傳名稱統(tǒng)一為_uploadFile攘宙，為此就擴(kuò)展了這個參數(shù)進(jìn)行修改上傳圖片的文件名。

• 對于toolbarIcons參數(shù)的參數(shù)值拐迁，也是我擴(kuò)展的蹭劈，因為原生的editor.md工具欄的種類只有3種，即：full线召、simple铺韧、mini。這樣導(dǎo)致工具欄要么太多了缓淹，要么太少了哈打，所以就再定義一個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"
  ]
  

最終富文本編輯器頁面效果如下：

003.png

2料仗、開發(fā)布文章功能

處理文章圖片的UploadGroupLogoHandler，內(nèi)容為：

/**
 * 上傳專欄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("/") || basePath.endsWith("\\"))) {
                basePath += "/";
            }

            // 根據(jù)當(dāng)前時間構(gòu)建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 + "/" + 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;
    }
}

加載出發(fā)布文章頁面核心代碼為：

/**
 * 加載出新增文章頁面
 *
 * @param model
 * @param request
 * @param session
 * @return
 */
@RequestMapping(value = "/user/article/add", method = RequestMethod.GET)
public String add(Model model, HttpServletRequest request, HttpSession session) {
    // 獲取登錄信息
    User tempUser = (User) session.getAttribute(Const.SESSION_USER);
    String userId = tempUser.getUserId();

    // 獲取用戶信息
    User user = userService.getById(userId);

    // 構(gòu)建專欄的查詢條件
    Map<String, Object> params = new HashMap<String, Object>();
    params.put("creator", user.getUserId());
    params.put("status", Group.STATUS_SUCCESS);

    List<Group> groups = groupService.list(new QueryWrapper<Group>().allEq(params).orderByDesc("createTime"));

    model.addAttribute("user", user);
    model.addAttribute("groups", groups);
    return Const.BASE_INDEX_PAGE + "blog/article/add";
}

處理發(fā)布文章的核心代碼為：

/**
 * 新增文章
 *
 * @param request
 * @param session
 * @return
 */
@RequestMapping(value = "/user/article/add", method = RequestMethod.POST)
@ResponseBody
public Result add(HttpServletRequest request, HttpSession session) {
    Result result = new Result();
    try {
        // 接收參數(shù)
        String groupId = request.getParameter("groupId");
        String title = request.getParameter("title");
        String content = request.getParameter("content");
        String tag = request.getParameter("tag");
        String description = request.getParameter("description");
        String typeStr = request.getParameter("type");
        String canTopStr = request.getParameter("canTop");
        String canCommentStr = request.getParameter("canComment");

        // 校驗參數(shù)
        if (StringUtils.isEmpty(title) || StringUtils.isEmpty(content) || StringUtils.isEmpty(description)) {
            throw new TipException("缺少必要參數(shù)");
        }

        int type = 0;
        int canTop = 0;
        int canComment = 1;
        try {
            type = Integer.parseInt(typeStr);
            canTop = Integer.parseInt(canTopStr);
            canComment = Integer.parseInt(canCommentStr);
        } catch (Exception e) {
            throw new TipException("參數(shù)類型錯誤");
        }

        // 去html相關(guān)標(biāo)簽
        description = StringUtil.replaceHtmlTags(description);

        // 客戶端ip
        String ip = HttpUtil.getIpAddr(request);

        // 獲取session中的用戶信息
        User tempUser = (User) session.getAttribute(Const.SESSION_USER);
        String userId = tempUser.getUserId();

        // 封裝文章信息
        Article article = new Article();
        article.setArticleId(IdGenarator.guid());
        article.setGroupId(groupId);
        article.setTitle(title);
        article.setContent(content);
        article.setDescription(description);
        article.setType(type);
        article.setCanTop(canTop);
        article.setCanComment(canComment);
        article.setViewCount(0L);
        article.setGoodNum(0L);
        article.setBadNum(0L);
        article.setCreateTime(new Date());
        article.setCreateIp(ip);
        article.setUserId(userId);

        // 保存文章
        articleService.create(article, tag);

        result.setCode(Result.CODE_SUCCESS);
        result.setMsg("發(fā)布文章成功");
    } catch (TipException e) {
        result.setCode(Result.CODE_EXCEPTION);
        result.setMsg(e.getMessage());
    } catch (Exception e) {
        log.error("新增文章失敗", e);
        result.setCode(Result.CODE_EXCEPTION);
        result.setMsg("新增文章失敗");
    }
    return result;
}

完整的發(fā)布文章頁面如下：

004.png

關(guān)注我

以你最方便的方式關(guān)注我：
微信公眾號：

架構(gòu)與我