editormd实现Markdown编辑器写文章功能

时间:2019-01-12 23:30:01 来源:互联网 作者: 神秘的大神 字体:

想在项目里引入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();         }     }      }

在这里插入图片描述

在这里插入图片描述

然后就在自己的项目里集成成功了,项目链接:https://github.com/u014427391/myblog,自己做的一款开源博客,前端的感谢一个个人网站分享的模板做的,http://www.yangqq.com/download/div/2013-06-15/272.html,感谢作者