网站文章内容编辑器(想在项目里引入Markdown编辑器功能，网上找到一款开源的插件editormd.js)

　　网站文章内容编辑器(想在项目里引入Markdown编辑器功能，网上找到一款开源的插件editormd.js)

　　想在项目中引入Markdown编辑器实现写文章的功能，在网上找了一个开源插件editormd.js

　　简介网站：

　　源码：插件代码已经开源到github。

　　可以先通过git clone下载

　　git clone https://github.com/pandao/editor.md.git

　　现在介绍如何引入到JavaWeb项目中。可以在Webapp（WebContent）文件夹下创建plugins文件夹，然后创建editormd文件夹。文件夹名称随意。

　　官方网站也给出了更详细的说明，因为我不需要很多个性化的功能，所以可以在下载的examples文件夹下找到simple.html文件夹

　　添加样式css文件

　　关键 JavaScript 脚本

　　

var testEditor;

$(function() {

testEditor = editormd("test-editormd", {

width : "90%",

height : 640,

syncScrolling : "single",

path : "plugins/editormd/lib/"

});

});

　　写一个jsp页面

　　

Nicky's blog 写文章

#articleTitle{

width: 68%;

margin-top:15px;

}

#articleCategory{

margin-top:15px;

width:10%;

}

#btnList {

position:relative;

float:right;

margin-top:15px;

padding-right:70px;

}

文章标题：

类别：

发布文章

var testEditor;

$(function() {

testEditor = editormd("test-editormd", {

width : "90%",

height : 640,

syncScrolling : "single",

path : "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 += "";

optionStr += data[i].name;

optionStr +="";

}

$("#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: &#39;article/saveOrUpdateArticle.do&#39;,

data: {&#39;title&#39;:title,&#39;content&#39;:content,&#39;typeId&#39;:typeId},

dataType:&#39;json&#39;,

//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;

}

}

　　然后只是在后台获取参数。注意path参数需要修改。

　　testEditor = editormd("test-editormd", {

width : "90%",

height : 640,

syncScrolling : "single",

path : "plugins/editormd/lib/"

});

　　SpringMVC写了一个获取参数保存的接口，项目使用Spring数据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;

}

}

　　存储库接口：

　　商业服务类：

　　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);

}

}

　　控制器类：

　　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();

}

}

}

　　

　　

　　然后成功集成到自己的项目中，项目链接：，我做了一个开源博客，前端感谢个人网站共享模板，感谢作者