网站文章内容编辑器(想在项目里引入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: '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;

}

}

　　那么你只需要在后台获取参数即可。请注意，路径参数需要更改。

　　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.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{

...

}

　　商务服务类：

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

}

}

　　控制器类：

　　

　　在此处插入图像描述

　　

　　在此处插入图像描述

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