《Editor.md文档书写神器-笔录》
2018-05-18 本文已影响3人
Codingyu
简介
Editor.md是编辑书写Markdown的插件。可以帮助我们书写出漂亮的Markdown文档。
下面我介绍使用Editor.md插件，集成到web前端。功能点：
- 1.实现markdown文档编辑器
-
2.实现markdown文档查看器
使用markdown文档编辑器书写完文档后保存到服务器，然后通过markdown文档查看器去请求服务器获取到之前保存的*.md文档进行浏览查看。掌握了它我们就可以自己去扩展属于自己的文档编辑工具甚至平台。
实现步骤：
-
1.下载Editor.md插件（github下载地址）
https://pandao.github.io/editor.md/
image.png
建议先到官方看下如何使用，避免少走弯路
官方地址 https://pandao.github.io/editor.md/examples/index.html
-
2.集成到项目中
下载下来解压后是一个npm项目，你可以直接使用 也可以自行再扩展功能，下载依赖modules，再编译构建。这里 我就不重新构建了，需要重新构建的同学如果不清楚如何构建npm项目可以参考我的其它文章《NodeJS开发教程5-包管理工具npm》https://www.jianshu.com/p/445d0168d691
image.png
好，接下来我们把下载的Editor.md插件copy到我们的项目，只copy我们用到的文件也可以，或者干脆暴力一点把所有文件都copy到项目（发布版建议去除非依赖文件）我把它copy到了项目的前端插件目录中（并且我重新命了下文件夹的名称：editor.md）：
image.png
-
3.实现markdown文档编辑器
我在项目的前端目录中创建了 md-editor.html 用来实现markdown文档编辑器：
image.png
md-editor.html文件内容：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>Editor.md-Markdown编辑器</title>
<link rel="stylesheet" href="../plugins/editor.md/examples/css/style.css" />
<link rel="stylesheet" href="../plugins/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="../plugins/editor.md/css/editormd.css" />
</head>
<body>
<div id="layout">
<header>
<h1 style="text-align: center;">Editor.md-Markdown编辑器</h1>
</header>
<div style="width: 90%;margin: auto;">
<button style="margin: 1rem;" class="btn btn-success pull-right" type="button" onclick="saveDoc()">保存文档</button>
</div>
<div id="test-editormd">
<textarea style="display:none;">
[TOC]
#MD文档编辑器（爽）
#### 可以显示列表项
- TeX (Based on KaTeX);
- Emoji;
- Task lists;
- HTML tags decode;
- Flowchart and Sequence Diagram;
#### 可以显示目录 directory
editor.md/
lib/
css/
scss/
tests/
fonts/
images/
plugins/
examples/
languages/
editormd.js
...
####[TOC]文档目录自动生成
头部引入 '[TOC]' 参考本文档头部，目录索引自动生成，很方便的！
</textarea>
</div>
</div>
<script src="../plugins/editor.md/examples/js/jquery.min.js"></script>
<script src="../plugins/editor.md/editormd.min.js"></script>
<script type="text/javascript">
var testEditor;
$(function() {
testEditor = editormd("test-editormd", {
width : "90%",
height : 640,
syncScrolling : "single",
path : "../plugins/editor.md/lib/"
});
/*
// or
testEditor = editormd({
id : "test-editormd",
width : "90%",
height : 640,
path : "../plugins/editor.md/lib/"
});
*/
});
</script>
<script>
//保存文档
function saveDoc()
{
// 获取Markdown源码
var mdstr=testEditor.getMarkdown();
console.log(mdstr);
//保存到服务器
$.post("/bf/saveDoc",{filename:"test1",content:mdstr},function(data)
{
alert(data);
});
}
</script>
</body>
</html>
-
4.实现服务器存储编辑器内容
服务器我用的是springboot,当然你也可以用你熟悉的服务器来管理文档内容。
import com.yu.scloud.baseframe.frame.utils.FileOperate;
import org.springframework.util.ResourceUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.ServletRequest;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.IOException;
@RestController
public class MDWriterController {
@RequestMapping("/saveDoc")
public String saveDoc(String filename, String content, ServletRequest request)
{
try {
File file=getFile("/static/demo/doc/");
FileOperate.writeFile(file.getAbsolutePath()+filename+".md",content);
return "保存成功";
} catch (IOException e) {
e.printStackTrace();
}
return "保存失败";
}
private File getFile(String rel) throws FileNotFoundException {
//获取跟目录
File path = new File(ResourceUtils.getURL("classpath:").getPath());
return new File(path.getAbsolutePath(),rel);
}
@RequestMapping("/viewDoc")
public String viewDoc(String filename)
{
try {
File file=getFile("/static/demo/doc/");
return FileOperate.readFile(file.getAbsolutePath()+filename+".md");
} catch (IOException e) {
e.printStackTrace();
}
return "";
}
}
启动服务器访问md-editor.html，编辑好信息后就可以保存文档了：
image.png
文档会保存到你指定的服务器目录中，并命名为：*.md。我这里命名为：test1.md。
-
5.实现markdown文档查看器
新建 view-md.html 内容如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="../plugins/editor.md/examples/css/style.css" />
<link rel="stylesheet" href="../plugins/editor.md/css/editormd.preview.css" />
<style>
.editormd-html-preview {
width: 90%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="layout">
<header>
<h1>Markdown转HTML的显示处理</h1>
<p>即：非编辑情况下的HTML预览</p>
<p>HTML Preview(markdown to html)</p>
</header>
<div id="test-editormd-view">
<textarea style="display:none;" name="test-editormd-markdown-doc">###Hello world!</textarea>
</div>
</div>
<!-- <script src="js/zepto.min.js"></script>
<script>
var jQuery = Zepto; // 为了避免修改flowChart.js和sequence-diagram.js的源码，所以使用Zepto.js时想支持flowChart/sequenceDiagram就得加上这一句
</script> -->
<script src="../plugins/editor.md/examples/js/jquery.min.js"></script>
<script src="../plugins/editor.md/lib/marked.min.js"></script>
<script src="../plugins/editor.md/lib/prettify.min.js"></script>
<script src="../plugins/editor.md/lib/raphael.min.js"></script>
<script src="../plugins/editor.md/lib/underscore.min.js"></script>
<script src="../plugins/editor.md/lib/sequence-diagram.min.js"></script>
<script src="../plugins/editor.md/lib/flowchart.min.js"></script>
<script src="../plugins/editor.md/lib/jquery.flowchart.min.js"></script>
<script src="../plugins/editor.md/editormd.js"></script>
<script type="text/javascript">
$(function() {
var testEditormdView;
//可以加入模板引擎或是访问query动态传入view的md文档
$.get("/bf/viewDoc?filename=test1",function(data)
{
var content=data;
$("#test-editormd-view textarea").text(content);
testEditormdView = editormd.markdownToHTML("test-editormd-view", {
htmlDecode : "style,script,iframe", // you can filter tags decode
emoji : true,
taskList : true,
tex : true, // 默认不解析
flowChart : true, // 默认不解析
sequenceDiagram : true, // 默认不解析
});
});
});
</script>
</body>
</html>
指定刚刚生成的 test1.md文档资源查看：
image.png
这样我们就实现了简单的文档编辑、上传、以及查看功能，是不是很简单！END。
