Editor.md集成

Editor.md集成

7 2018-09-26 20:26:05

###下载
1.通过GitHub或官方网站下载editor.md压缩包
2.解压
3.将需要的部分保存到网站静态资源目录
4.在页面引用相关文件
###下载文件目录结构
一般而言下载的文件是
editor.md-master.zip
```
editor.md-master
	tests	// 测试文件
	src	// 源文件
	scss	// 一些css文件
	plugins	// 插件
	lib	// 一些很有用的编辑器功能
	languages	// 语言文件
	images	// 加载动画图
	fonts	// 字体文件
	examples	// 示例文件
	docs	// 文档
	css	// css文件
	部分js文件
```
我个人用到的有
```
scss目录
plugins目录
lib目录
languages目录
images目录
fonts目录
css目录
editormd.amd.js
editormd.js
Gulpfile.js	// 不知道干啥用的
```
###引用
根据官方说明，需要引用这两个文件
```
<link rel="stylesheet" href="css/editormd.min.css" />
<script src="editormd.min.js"></script>
```
###Html代码
```html
<div id="editormd">
	<textarea style="display:none;"></text area>
</div>
```
###Js代码
```javascript
var editor_content;
$(function() {
	editor_content = editormd({
		id : "editormd",	// Html id
		height : 500,	// 高
		path : "/lib/",	// Editor.md的lib目录，以/结尾
		saveHTMLToTextarea : true	// 如需提取Html结果，需要设置为true
	});
});
```
###提取
可获取Markdown语法或Html语法的数据，一般展示只需要Html数据，但修改时还是有Markdown原数据会更方便，强烈建议两者都获取。
```javascript
var markdown = editor_content.getMarkdown();	// 获取Markdown
var content = editor_content.getHTML();	// 获取Html，需要saveHTMLToTextarea为true
```
##Hello World
```html
<link rel="stylesheet" href="css/editormd.min.css" />	
<div id="editormd">
	
	<textarea style="display:none;">### Hello Editor.md !</text area>
</div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script src="editormd.min.js"></script>
<script type="text/javascript">
	// 初始化编辑器
	$(function() {
		var editor = editormd(
			id : "editormd",	// Html id
			height : 500,	// 高
			path : "/lib/",	// Editor.md的lib目录，以/结尾
			saveHTMLToTextarea : true	// 如需提取Html结果，需要设置为true
		});
	});
</script>
```
###展示
展示可直接用提取的Html内容，但使用Editor.md预览风格展示效果会更好，这需要输出Markdown内容并使用Editor.md的js脚本渲染
**Html代码**
```html
<div id="editormd-view">
	
	
	<textarea style="display:none;">{markdown内容}</text area>
</div>

<script src="/sf/editormd/editormd.js"></script>
<script src="/sf/editormd/lib/marked.min.js"></script>
<script src="/sf/editormd/lib/prettify.min.js"></script>
<script src="/sf/editormd/lib/raphael.min.js"></script>
<script src="/sf/editormd/lib/underscore.min.js"></script>
<script src="/sf/editormd/lib/sequence-diagram.min.js"></script>
<script src="/sf/editormd/lib/flowchart.min.js"></script>
<script src="/sf/editormd/lib/jquery.flowchart.min.js"></script>
```
**Js代码**
```javascript
$(function() {
    var testEditormdView = editormd.markdownToHTML("editormd-view", {	// 与html的id一致
        htmlDecode      : "style,script,iframe",  // you can filter tags decode
        emoji           : true,
        taskList        : true,
        tex             : true,  // 默认不解析
        flowChart       : true,  // 默认不解析
        sequenceDiagram : true,  // 默认不解析
    });
});
```