釋出文章功能裡面最重要的就是需要整合富文字編輯器,目前富文字編輯器有很多,例如ueditor,CKEditor、editor.md等。這裡守望部落格裡面是整合的editor.md,因為editor.md是markdown格式,目前markdown由於簡潔好用,在各種雲筆記、github等中得到了廣泛使用。
1、整合editor.md
editor.md是在github上開源,開源地址為:https://github.com/pandao/editor.md,下載其釋出的最新版本,即:
解壓後,將相應的文章新增到系統中,即:
將這些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相關的引用是提前就引用好的)。
頁面中需要插入富文字編輯器的地方程式碼如下:
<div class="form-group">
<div class="col-sm-12" id="article-editormd">
<textarea style="display:none;"></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" ]
最終富文字編輯器頁面效果如下:
2、開發布文章功能
處理文章圖片的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("/") || basePath.endsWith("\\"))) {
basePath += "/";
}
// 根據當前時間構建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;
}
}
載入出釋出文章頁面核心程式碼為:
/**
* 載入出新增文章頁面
*
* @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);
// 構建專欄的查詢條件
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";
}
處理髮布文章的核心程式碼為:
/**
* 新增文章
*
* @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 {
// 接收引數
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");
// 校驗引數
if (StringUtils.isEmpty(title) || StringUtils.isEmpty(content) || StringUtils.isEmpty(description)) {
throw new TipException("缺少必要引數");
}
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("引數型別錯誤");
}
// 去html相關標籤
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("釋出文章成功");
} 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;
}
完整的釋出文章頁面如下:
關注我
以你最方便的方式關注我: 微信公眾號: