个人博客项目之editormd实现写文章功能 心已赠人 2021-09-17 16:50 323阅读 0赞 想在项目里引入Markdown编辑器实现写文章功能,网上找到一款开源的插件editormd.js 介绍网站:https://pandao.github.io/editor.md/examples/index.html 源码:https://github.com/pandao/editor.md, 插件代码已经开源到github上了。 可以先git clone下载下来 git clone https://github.com/pandao/editor.md.git 现在介绍一下怎么引入JavaWeb项目里,可以在Webapp(WebContent)文件夹下面,新建一个plugins的文件夹,然后再新建editormd文件夹,文件夹命名的随意。 在官方网站也给出了比较详细的使用说明,因为我需要的个性化功能不多,所以下载下来的examples文件夹下面找到simple.html文件夹 加上样式css文件 <link href="<%=basePath %>plugins/editormd/css/editormd.min.css" rel="stylesheet" type="text/css" /> 关键的JavaScript脚本 <script type="text/javascript" src="<%=basePath %>static/js/jquery-1.8.3.js"></script> <script type="text/javascript" src="<%=basePath %>plugins/editormd/editormd.min.js"></script> <script type="text/javascript"> var testEditor; $(function() { testEditor = editormd("test-editormd", { width : "90%", height : 640, syncScrolling : "single", path : "<%=basePath %>plugins/editormd/lib/" }); }); </script> 写个jsp页面 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE html> <html> <head> <base href="<%=basePath %>"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Nicky's blog 写文章</title> <link rel="icon" type="image/png" href="static/images/logo/logo.png"> <link href="<%=basePath %>plugins/editormd/css/editormd.min.css" rel="stylesheet" type="text/css" /> <link href="<%=basePath %>static/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #articleTitle{ width: 68%; margin-top:15px; } #articleCategory{ margin-top:15px; width:10%; } #btnList { position:relative; float:right; margin-top:15px; padding-right:70px; } </style> </head> <body> <div id="layout"> <header> 文章标题:<input type="text" id="articleTitle" /> 类别: <select id="articleCategory"></select> <span id="btnList"> <button type="button" id="publishArticle" onclick="writeArticle.doSubmit();" class="btn btn-info">发布文章</button> </span> </header> <div id="test-editormd"> <textarea id="articleContent" style="display: none;"> </textarea> </div> </div> <script type="text/javascript" src="<%=basePath %>static/js/jquery-1.8.3.js"></script> <script type="text/javascript" src="<%=basePath %>plugins/editormd/editormd.min.js"></script> <script type="text/javascript"> var testEditor; $(function() { testEditor = editormd("test-editormd", { width : "90%", height : 640, syncScrolling : "single", path : "<%=basePath %>plugins/editormd/lib/" }); categorySelect.init(); }); /* 文章类别下拉框数据绑定 */ var categorySelect = { init: function () {//初始化数据 $.ajax({ type: "GET", url: 'articleSort/listArticleCategory.do', dataType:'json', contentType:"application/json", cache: false, success: function(data){ //debugger; data = eval(data) ; categorySelect.buildOption(data); } }); }, buildOption: function (data) {//构建下拉框数据 //debugger; var optionStr =""; for(var i=0 ; i < data.length; i ++) { optionStr += "<option value="+data[i].typeId+">"; optionStr += data[i].name; optionStr +="</option>"; } $("#articleCategory").append(optionStr); } } /* 发送文章*/ var writeArticle = { doSubmit: function () {//提交 if (writeArticle.doCheck()) { //debugger; var title = $("#articleTitle").val(); var content = $("#articleContent").val(); var typeId = $("#articleCategory").val(); $.ajax({ type: "POST", url: '<%=basePath %>article/saveOrUpdateArticle.do', data: {'title':title,'content':content,'typeId':typeId}, dataType:'json', //contentType:"application/json", cache: false, success: function(data){ //debugger; if ("success"== data.result) { alert("保存成功!"); setTimeout(function(){ window.close(); },3000); } } }); } }, doCheck: function() {//校验 //debugger; var title = $("#articleTitle").val(); var content = $("#articleContent").val(); if (typeof(title) == undefined || title == null || title == "" ) { alert("请填写文章标题!"); return false; } if(typeof (content) == undefined || content == null || content == "") { alert("请填写文章内容!"); return false; } return true; } } </script> </body> </html> 然后后台只要获取一下参数就可以,注意的是path参数要改一下 testEditor = editormd("test-editormd", { width : "90%", height : 640, syncScrolling : "single", path : "<%=basePath %>plugins/editormd/lib/" }); SpringMVC写个接口获取参数进行保存,项目用了Spring data Jpa来实现 package net.myblog.entity; import javax.persistence.*; import java.util.Date; /** * 博客系统文章信息的实体类 * @author Nicky */ @Entity public class Article { /** 文章Id,自增**/ private int articleId; /** 文章名称**/ private String articleName; /** 文章发布时间**/ private Date articleTime; /** 图片路径,测试**/ private String imgPath; /** 文章内容**/ private String articleContent; /** 查看人数**/ private int articleClick; /** 是否博主推荐。0为否;1为是**/ private int articleSupport; /** 是否置顶。0为;1为是**/ private int articleUp; /** 文章类别。0为私有,1为公开,2为仅好友查看**/ private int articleType; private int typeId; private ArticleSort articleSort; @GeneratedValue(strategy=GenerationType.IDENTITY) @Id public int getArticleId() { return articleId; } public void setArticleId(int articleId) { this.articleId = articleId; } @Column(length=100, nullable=false) public String getArticleName() { return articleName; } public void setArticleName(String articleName) { this.articleName = articleName; } @Temporal(TemporalType.DATE) @Column(nullable=false, updatable=false) public Date getArticleTime() { return articleTime; } public void setArticleTime(Date articleTime) { this.articleTime = articleTime; } @Column(length=100) public String getImgPath() { return imgPath; } public void setImgPath(String imgPath) { this.imgPath = imgPath; } @Column(nullable=false) public String getArticleContent() { return articleContent; } public void setArticleContent(String articleContent) { this.articleContent = articleContent; } public int getArticleClick() { return articleClick; } public void setArticleClick(int articleClick) { this.articleClick = articleClick; } public int getArticleSupport() { return articleSupport; } public void setArticleSupport(int articleSupport) { this.articleSupport = articleSupport; } public int getArticleUp() { return articleUp; } public void setArticleUp(int articleUp) { this.articleUp = articleUp; } @Column(nullable=false) public int getArticleType() { return articleType; } public void setArticleType(int articleType) { this.articleType = articleType; } public int getTypeId() { return typeId; } public void setTypeId(int typeId) { this.typeId = typeId; } @JoinColumn(name="articleId",insertable = false, updatable = false) @ManyToOne(fetch=FetchType.LAZY) public ArticleSort getArticleSort() { return articleSort; } public void setArticleSort(ArticleSort articleSort) { this.articleSort = articleSort; } } Repository接口: package net.myblog.repository; import java.util.Date; import java.util.List; import net.myblog.entity.Article; import org.springframework.data.domain.Page; import org.springframework.data.domain.PageRequest; import org.springframework.data.domain.Pageable; import org.springframework.data.jpa.repository.Query; import org.springframework.data.repository.PagingAndSortingRepository; import org.springframework.data.repository.query.Param; public interface ArticleRepository extends PagingAndSortingRepository<Article,Integer>{ ... } 业务Service类: package net.myblog.service; import net.myblog.entity.Article; import net.myblog.repository.ArticleRepository; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.data.domain.Page; import org.springframework.data.domain.PageRequest; import org.springframework.data.domain.Sort.Direction; import org.springframework.stereotype.Service; import org.springframework.transaction.annotation.Transactional; import java.util.Date; import java.util.List; @Service public class ArticleService { @Autowired ArticleRepository articleRepository; /** * 保存文章信息 * @param article * @return */ @Transactional public Article saveOrUpdateArticle(Article article) { return articleRepository.save(article); } } Controller类: package net.myblog.web.controller.admin; import com.alibaba.fastjson.JSONObject; import net.myblog.core.Constants; import net.myblog.entity.Article; import net.myblog.service.ArticleService; import net.myblog.service.ArticleSortService; import net.myblog.web.controller.BaseController; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.data.domain.Page; import org.springframework.data.domain.Sort.Direction; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.servlet.ModelAndView; import javax.servlet.http.HttpServletRequest; import java.util.Date; @Controller @RequestMapping("/article") public class ArticleAdminController extends BaseController{ @Autowired ArticleService articleService; @Autowired ArticleSortService articleSortService; /** * 跳转到写文章页面 * @return */ @RequestMapping(value="/toWriteArticle",method=RequestMethod.GET) public ModelAndView toWriteArticle() { ModelAndView mv = this.getModelAndView(); mv.setViewName("admin/article/article_write"); return mv; } /** * 修改更新文章 */ @RequestMapping(value = "/saveOrUpdateArticle", method = RequestMethod.POST) @ResponseBody public String saveOrUpdateArticle (@RequestParam("title")String title , @RequestParam("content")String content, @RequestParam("typeId")String typeIdStr) { int typeId = Integer.parseInt(typeIdStr); Article article = new Article(); article.setArticleName(title); article.setArticleContent(content); article.setArticleTime(new Date()); article.setTypeId(typeId); JSONObject result = new JSONObject(); try { this.articleService.saveOrUpdateArticle(article); result.put("result","success"); return result.toJSONString(); } catch (Exception e) { error("保存文章报错:{}"+e); result.put("result","error"); return result.toJSONString(); } } } ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70 1] 然后就在自己的项目里集成成功了,项目链接:https://github.com/u014427391/myblog, 自己做的一款开源博客,前端的感谢一个个人网站分享的模板做的,http://www.yangqq.com/download/div/2013-06-15/272.html, 感谢作者 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70]: /images/20210812/e30e197ce1154e1ba675cc8f6186fb80.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70 1]: /images/20210812/901e1e9342d44b66a4892e3954f71249.png
还没有评论,来说两句吧...