版权声明：本文为博主原创文章，转载请附上博文链接！ https://blog.csdn.net/qq_42920045/article/details/84654144
- 解压
editor.md-master.zip - 导入 web 项目
- 编辑 html 页面
- 编写 servlet 获取值
解压
editor.md-master.zipAND 导入 web 项目
editor.md-master.zip: 下载链接
编写 html 页面使用
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>markdown</title>
<link rel="stylesheet" href="editor/examples/css/style.css" />
<link rel="stylesheet" href="editor/css/editormd.css" />
<%-- 需要导入两个 CSS --%>
</head>
<body>
<div id="test-editormd">
<textarea style="display:none;">
<%-- 页面一开始显示的内容 --%>
</textarea>
</div>
<button onclick="save()" class="btn">save</button>
<%-- 导入jquery --%>
<script src="editor/examples/js/jquery.min.js"></script>
<%-- 导入 editormd 语法 --%>
<script src="editor/editormd.min.js"></script>
<script type="text/javascript">
var editor;
/** 初始化编辑器:
1. 需要注意的 path 目录指定的是 editor 中的 lib/
*/
$(function() {
editor = editormd("test-editormd", {
width : "90%",
height : 640,
syncScrolling : "single",
path : "editor/lib/",
saveHTMLToTextarea : true
});
});
/** 获取编辑器的内容 */
function save() {
var markdown = editor.getMarkdown();
var HTML = editor.getHTML();
console.log(markdown);
console.log(HTML);
$.ajax({
url:"markdownDemo",
type:"post",
data:{
"markdown":markdown,
"HTML":HTML
},
success:function(data) {
alert(data);
}
});
}
</script>
</body>
</html>
编写 servlet 获取值
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String markdown = request.getParameter("markdown");
String HTML = request.getParameter("HTML");
System.out.println(markdown);
System.out.println(HTML);
response.setCharacterEncoding("UTF-8");
response.getWriter().write("操作成功!");
}
初始化编辑器的值介绍
| 值 | 描述 |
|---|---|
| width | 编辑器的宽 |
| height | 编辑器的高 |
| syncScrolling | 同步滚动 |
| path | editor 中的 lib/ 目录 |
| saveHTMLToTextarea | 是否保存 HTML 数据 |
页面渲染 markdown 笔记
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>HTML Preview(markdown to html) - Editor.md examples</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="editor-md/css/editormd.preview.css" />
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
<style>
.editormd-html-preview {
width: 90%;
margin: 0 auto;
}
</style>
</head>
<body>
<span id="id" class="id" ></span>
<div id="layout">
<div id="test-editormd-view2">
<textarea id="append-test" style="display:none;"></textarea>
</div>
</div>
<script src="js/jquery-2.0.3.min.js"></script>
<script src="editor-md/lib/marked.min.js"></script>
<script src="editor-md/lib/prettify.min.js"></script>
<script src="editor-md/lib/raphael.min.js"></script>
<script src="editor-md/lib/underscore.min.js"></script>
<script src="editor-md/lib/sequence-diagram.min.js"></script>
<script src="editor-md/lib/flowchart.min.js"></script>
<script src="editor-md/lib/jquery.flowchart.min.js"></script>
<script src="editor-md/editormd.js"></script>
<script type="text/javascript">
$(function() {
/**
1. 获取到数据 editor-md 源数据
2. 将返回的源数据添加到容器中[id:append-test]
3. 接着下面渲染视图
注意: ajax 可能需要同步请求
*/
$.ajax({
type: "get",
url: "markdown",
data: {
"id": ${动态获取的数据库ID}
}, cache:false, async:false,
success: function(result){
console.log(result);
$("#append-test").empty().append(result.putContext);
}
});
var testEditormdView, testEditormdView2;
$.get("editor-md/examples/test.md", function(markdown) {
testEditormdView = editormd.markdownToHTML("test-editormd-view", {
markdown : markdown ,//+ "\r\n" + $("#append-test").text(),
//htmlDecode : true, // 开启 HTML 标签解析，为了安全性，默认不开启
htmlDecode : "style,script,iframe", // you can filter tags decode
//toc : false,
tocm : true, // Using [TOCM]
//tocContainer : "#custom-toc-container", // 自定义 ToC 容器层
//gfm : false,
//tocDropdown : true,
// markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
emoji : true,
taskList : true,
tex : true, // 默认不解析
flowChart : true, // 默认不解析
sequenceDiagram : true, // 默认不解析
});
//console.log("返回一个 jQuery 实例 =>", testEditormdView);
// 获取Markdown源码
//console.log(testEditormdView.getMarkdown());
//alert(testEditormdView.getMarkdown());
});
testEditormdView2 = editormd.markdownToHTML("test-editormd-view2", {
htmlDecode : "style,script,iframe", // you can filter tags decode
emoji : true,
taskList : true,
tex : true, // 默认不解析
flowChart : true, // 默认不解析
sequenceDiagram : true, // 默认不解析
});
});
</script>
</body>
</html>