java web实现markdown_在JAVA-WEB项目使用Editor.md实现MarkDown编辑器

最新推荐文章于 2024-06-30 00:13:11 发布

臭熊的哥哥

最新推荐文章于 2024-06-30 00:13:11 发布

阅读量771

点赞数

文章标签： java web实现markdown

本文链接：https://blog.csdn.net/weixin_42519488/article/details/115074230

版权

官网：http://pandao.github.io/editor.md/

Editor.md的安装使用：基本使用markdown是相当简单的，比ueditor还要简单，从git上下载回来的Editor.md是1.5版，压缩包里有分门别类详细的文件夹。

在examples文件夹中有一个简单的示例simple.html，可以在浏览器里打开，并查看源代码，我这里做一个简单的总结，并加上表单提交的配置：

在HTML中加载CSS：editormd.css

在HTML中加载JS：顺序为jQuery，editormd.min.js，

在HTML中写一个div节点,包含两个textarea，格式如下：

在HTML中写一句javascript：

$(function() {

editormd("test-editormd", {

width : "90%",

height : 640,

syncScrolling : "single",

//你的lib目录的路径，我这边用JSP做测试的

path : "/resources/editormd/lib/",

//这个配置在simple.html中并没有，但是为了能够提交表单，使用这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单。

saveHTMLToTextarea : true

});

OK，这样就完成了一个最简单的editor.md的编辑器了，你可以在这里面书写你熟悉的Markdown文档，里面可以包含代码，右侧有实时的预览。如图所示：

Editor.md代码黑色主题：习惯了黑色背景的代码样式，就希望editor.md也能实现代码黑色样式，果然，editor.md从1.5版本以后为大家提供了dark样式主题，但是会让除代码以外的其他编辑区域也变黑色，所以根据个人需要来小小的改造一下：

首先添加样式配置，在原来的editor.md配置基础上，添加配置项：

var testEditor = editormd("test-editormd", {

width: "90%",

height: 640,

saveHTMLToTextarea: true,

path: "/webjars/editor.md/lib/",

syncScrolling: "single",

//下面这一行将使用dark主题

previewTheme : "dark"

});配置好dark主题以后，编辑区还是原来的编辑区，预览区已经使用了暗黑模式，但是代码以外的部分也都变成黑色背景了，这不是我想要的，所以我对editormd.css做了一些修正，将dark主题代码以外的部分取消了样式定义，这样预览起来只有代码块是暗黑模式，截图如下：

修改了editormd.css后，别忘了使用CSS压缩工具再压缩一遍，生成editormd.min.css，这样正式部署时能减轻一点服务器压力，提高加载效率。我把压缩好重新生成的editormd.min.css放出来，有需要的可以直接下载。https://leanote.com/api/file/getAttach?fileId=57ac14c3ab644133ed0476bb

文档的显示：编辑区的代码格式已经调整成为我们喜欢的样式了，在表单POST提交时，editormd将我们的markdown语法文档翻译成了HTML语言，并将html字符串提交给了我们的后台，后台应该将这些HTML字符串持久化到数据库中，在文章显示时将他们显示在页面上。具体的做法是：

新建文章页面：

显示文章页面：

${article.text }

editormd.markdownToHTML("content");

图片上传：有了基本的Markdown功能，集成editor.md就完成了一半了，下面开始处理图片上传。图片上传的语法是![alt](url),这个用来嵌入互联网上现成的图片是很方便的，但是如果想要上传本地图片就要后台代码配合了，我下面以JAVA为例(官方文档有PHP的示例)，配合SpringMVC和commons-fileupload-1.3.1.jar，简单给个DEMO：根据Editor.md的官方文档介绍，上传图片功能需要添加一点配置，如下：

editormd("test-editormd", {

width : "90%",

height : 640,

syncScrolling : "single",

path : "/resources/editormd/lib/",

imageUpload : true,

imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],

imageUploadURL : "/uploadfile",

saveHTMLToTextarea : true,

});

//editor.md期望得到一个json格式的上传后的返回值，格式是这样的：

{

success : 0 | 1, // 0 表示上传失败，1 表示上传成功

message : "提示的信息，上传成功或上传失败及错误信息等。",

url : "图片地址" // 上传成功时才返回

}

*/以上代码并不难理解，也就加了三行配置，关键的是imageUploadURL : "/uploadFile"这个配置，这里的URL指向了你处理图片上传的action，与之对应的，我的SpringMVC控制器是这样的，这里贴出了整个代码，防止有小伙伴对JAVA以及SpringMVC处理文件上传还不太熟练：

package com.newflypig.jblog.controller;

import java.io.File;

import java.io.IOException;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.apache.commons.io.FileUtils;

import org.springframework.stereotype.Controller;

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.multipart.MultipartFile;

@Controller

public class UploadController {

@RequestMapping(value="/uploadfile",method=RequestMethod.POST)

public void hello(HttpServletRequest request,HttpServletResponse response,@RequestParam(value = "editormd-image-file", required = false) MultipartFile attach){

try {

request.setCharacterEncoding( "utf-8" );

response.setHeader( "Content-Type" , "text/html" );

String rootPath = request.getSession().getServletContext().getRealPath("/resources/upload/");

/**

* 文件路径不存在则需要创建文件路径

File filePath=new File(rootPath);

if(!filePath.exists()){

filePath.mkdirs();

}

//最终文件名

File realFile=new File(rootPath+File.separator+attach.getOriginalFilename());