前言
本篇主要是使用Java语言结合开源editor.md进行开发markdown论坛功能,具体请看下图,如果不是你想要的,那可以看我另外一篇使用commonmark-java解析成html文档的文章
详细功能:
markdown界面很简洁,简书也就是这样,下图是你想要的吗?
原材料准备
editor.md
是国人开发的开源在线Markdown编辑器,单纯基于前端JavaScript,无需后台代码加持,适用于任何语言,我这里使用examples示例来进行改造,很久没更新了.....
首页地址:http://pandao.github.io/editor.md/
项目搭建,资源准备
注意:这个步骤过程有点繁琐,尤其是一些资源文件的访问,所以可以根据自己的情况进行调整,但一定要看到第10步对应的界面,资源准备才算完成
- 名词:下述所有的“外层”表示源码包的第一层目录
- 新建SpringBoot项目,这里不做赘述,不会的朋友请看超简单SpringBoot搭建
- 然后将外层examples文件夹中的css、js资源,拷贝到resources下的static中
- 将外层examples文件夹中的simple.html示例文件拷贝到工程的templates下面,如下图
- 编辑simple.html文件,将如下图的资源文件路径根据你的项目进行调整
-
上图中的editormd.css和editormd.min.js需要从外层文件中拷贝进来,拷贝进来后如下图
准备editormd.css和editormd.min.js -
拷贝外层的lib目录
lib目录加载 -
拷贝外层的fonts目录,并且将外层文件夹images中的loading.gif拷贝到我们项目的images中
fonts目录,loading.gif文件 -
最终 调整后的simple.html文件内容为
最终路径与内容对比 -
加入Controller类,以便于做后续操作
image.png -
启动服务器,要求能够访问simple.html,并且样式能够正常加载没有错误,如下图
看到该图后才可进行下一步
开始开发,前方高能
开发主要分为3个层面
- 简单的后台提交内容示例。
- 前台接收markdown内容页面显示时进行转换加载。
- 复杂的服务器端开发(带文件上传)
1、后台内容提交页面
该页面即simple.html页面,核心的加载的JS在代码在页面底部,如下:
var testEditor;
$(function() {
testEditor = editormd("test-editormd", {
width : "90%",
height : 640,
syncScrolling : "single",
path : "lib/"
});
});
开发提交功能
开始进入简单功能的开发,其JS的写法,也可以看examples中其他页面,对应不同的功能,有不同的JS,或者直接跟我进入开发,保证不带沟里
- simple界面中,加入form表单,修改JS,简单的提交客户端完成,内容如下:
<!--在外层定义一个form,用来取值和提交表单-->
<form name="mdEditorForm">
<div id="test-editormd">
<!--该区域内容为文字内容,非html内容-->
<textarea name="content" id="content" style="display:none;">这是我要提交的内容啊
</textarea>
</div>
</form>
testEditor中JS的变化
/**下述为新增,上面一行记得加逗号结束*/
/*指定需要显示的功能按钮*/
toolbarIcons : function() {
return ["undo", "redo", "|","bold", "italic","ucwords","uppercase","lowercase","|","h1","h2","h3","h4","h5","h6","|","list-ul","list-ol","table","datetime","hr", "||", "watch", "fullscreen", "preview", "releaseIcon", "index"]
},
/*自定义功能按钮,下面我自定义了2个,一个是发布,一个是返回首页*/
toolbarIconTexts : {
releaseIcon : "<span bgcolor=\"gray\">发布</span>",
index : "<span bgcolor=\"red\">返回首页</span>",
},
/*给自定义按钮指定回调函数*/
toolbarHandlers:{
releaseIcon : function(cm, icon, cursor, selection) {
contentCommit();//提交表单代码在下面
console.log("日志输出 testIcon =>", this, cm, icon, cursor, selection);
},
index : function(){
window.location.href = '返回首页的路径.html';
},
}
另外需要提供提交JS的代码
/*提交表单的js*/
function contentCommit(){
mdEditorForm.method = "post";
mdEditorForm.action = "contentCommit";//提交至服务器的路径
mdEditorForm.submit();
}
-
修改Controller,加入接收提交内容的方法,并且提供一个简单的view界面,用于预览,如下
服务器端代码
上图代码如下:
@Controller
@RequestMapping
public class MarkdownController {
@RequestMapping("simple")
public ModelAndView simple(){
//这里的文件名将直接定位到templates下面的文件
ModelAndView modelAndView = new ModelAndView("simple");
System.out.println("进入内容编写页面");
return modelAndView;
}
@RequestMapping("contentCommit")
public ModelAndView contentCommit(String content){
System.out.println("提交的内容为:" + content);
ModelAndView modelAndView = new ModelAndView("view");
//将内容发送至前台预览
modelAndView.addObject("viewContent" , content);
System.out.println("跳转至内容显示页面");
return modelAndView;
}
}
修改后的markdown页面
- 启动服务器,并且点击提交,你会发现内容正确到达客户端。
简单的提交完成,接下来,开发预览界面
2. 前台加载markdown语法,并且解析
-
拷贝examples中的html-preview-markdown-to-html.html页面,改名为view.html界面,将其中依赖的静态资源文件全部调整正确, 并且访问不报错误,所以你需要将不存在的文件有序的拷贝进来
- 新依赖外层css中的editormd.preview.css文件
- 新依赖外层的editormd.js,或直接将内容改为editormd.min.js,两者效果一样
- 新依赖examples中的test.md文件,jquery.min.js所依赖,可以修改jquery文件,移除掉
-
更改完成后的内容页面如下,控制台不能够报错
预览界面重要代码如下
预览JS图- 前台页面textarea id="append-test"中的内容全部清除,将上图JS中的test.md改为内容请求地址,后台提供一个rest内容获取接口
/**
* 读取所保存的markdown数据
* @return
*/
@RequestMapping("getContent")
@ResponseBody
public String getContent(){
return "### 这是markdown格式的内容,暂时固定写死,应从数据库读取上个接口保存的内容";
}
更改后的JS代码
点击发布后,出现的预览界面
到此为止,简单的markdonw集成进来了,其中的按钮以及js用法,还需要结合其他的页面进行进一步探讨,整体流程效果图如下:
整体流程效果图暂停
夜已深,先更到这里。
下一步进行继续更新,加入文件上传,以及读取剪贴板的文件流,请期待
网友评论