当今图文混排是一个技术难点如果是程序员可以用html书写或者word文档但是我们能不能实现我们在网页端实现书写图文混排和展示图文混排。
为什么不适用word文档插件，其实作者也使用过不过出现了一些作者无法解决的问题，比如word文档转换html或者html转换word后会出现格式不对的现象，这使得作者很困扰。再者我们需要在网页端书写漂亮的文档，并且把数据保存到数据库，以便于后面的展示以及修改删除操作。
…
言归正传，不多bb别的啥了，现在先介绍我们使用的js插件：
Editor.md
一款国产开源在线 Markdown 编辑器=、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。
Github上也有8.4k星星看来人气还是不错的
主要特性:
支持通用 Markdown / CommonMark 和 GFM (GitHub Flavored Markdown) 风格的语法，也可变身为代码编辑器；
支持实时预览、图片（跨域）上传、预格式文本/代码/表格插入、代码折叠、跳转到行、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能；
支持 ToC（Table of Contents）、Emoji表情、Task lists、@链接等 Markdown 扩展语法；
支持 TeX 科学公式（基于 KaTeX）、流程图 Flowchart 和 时序图 Sequence Diagram;
支持识别和解析 HTML 标签，并且支持自定义过滤标签及属性解析，具有可靠的安全性和几乎无限的扩展性；
兼容主流的浏览器（IE8+）和 Zepto.js，且支持 iPad 等平板设备；
enenen
官方吹逼介绍完毕，现在来电通俗点的语言。
1.它是干嘛的？它是一款开源的并且是一款js插件，就是能在网页端书写展示markdown的插件。
2.它功能多不多？能满足正常人类的书写需求了。
3.它用起来方便否？方便就那么几行死代码设置下就完了。
好的，现在贴出代码：
加载一个书写的markdown文本
这里为了编辑器的美观需要导入一些css样式
<link rel="stylesheet" href="css/editormd.css" />
<link rel="stylesheet" href="css/editormd.logo.css" />
<link rel="stylesheet" href="css/editormd.preview.css" />
<link rel="stylesheet" href="css/general.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
<div id="test-editormd"></div>
<script src="JQ/jquery.min.js"></script>
<script src="editormd/editormd.js"></script>
<script type="text/javascript">
var testEditor;
window.onload=function(){
loading_markdown('');
}
//这里直接调用这个加载方法就行了
//这里有个md参数默认你不是第一次写文章的话就传个空字符就可以了
//如果你是需要编辑原来的文章这里的md就传你原文档的内容，编辑器加载完后就会把传进来的内容显示
//怎样获取编辑器中我写的内容
//很简单这里定义了一个编辑器对象直接 testEditor.getMarkdown();
function loading_markdown(md) {
testEditor = editormd("test-editormd", {
placeholder:'左边编写，右边预览', //默认显示的文字，这里就不解释了
width: "90%",
height: 640,
syncScrolling: "single",
path: "./lib/", //你的path路径（原资源文件中lib包在我们项目中所放的位置）
theme : "dark",
previewTheme : "dark",
editorTheme : "pastel-on-dark",
markdown : md,
codeFold : true,
saveHTMLToTextarea : true, // 保存 HTML 到 Textarea
searchReplace : true,
htmlDecode : "style,script,iframe|on*", // 开启 HTML 标签解析，为了安全性，默认不开启
toolbar : false, //关闭工具栏
previewCodeHighlight : true, // 关闭预览 HTML 的代码块高亮，默认开启
emoji : true,
taskList : true,
tocm : true, // Using [TOCM]
tex : true, // 开启科学公式TeX语言支持，默认关闭
flowChart : true, // 开启流程图支持，默认关闭
sequenceDiagram : true, // 开启时序/序列图支持，默认关闭,
});
}
</script>
enen 现在我们已经完了我们文章的改增操作，现在我们来做一个显示操作，我们写了这个文章是不是也要展示给用户看，但总不能直接弄个编辑器给用户看把，不美观，能不能像html写的文章一样展示，答案当然是可以的
废话不说直接上代码：
//导入css样式
<link href="css/editormd.preview.css" rel="stylesheet"/>
<link href="css/editormd.css" rel="stylesheet"/>
//导入js插件文件
<script src="editormd/editormd.js"></script>
<script src="editormd/marked.min.js"></script>
<script src="editormd/prettify.min.js"></script>
<script src="editormd/raphael.min.js"></script>
<script src="editormd/underscore.min.js"></script>
<script src="editormd/sequence-diagram.min.js"></script>
<script src="editormd/flowchart.min.js"></script>
<script src="editormd/jquery.flowchart.min.js"></script>
//这就是暂时的html的一个div咯
<div id="testEditorMdview" class="testEditoclass">
<textarea id="appendTest" style="display:none;"></textarea>
</div>
//加载一下显示
<script>
//markDown转HTMl的方法
//这里的content就是你在数据库获取到的内容哦
//这样就会把markdown文件转换为一个html页面展示也是十分的美观的
function mdToHml(content) {
//先对容器初始化，在需要展示的容器中创建textarea隐藏标签，
$("#testEditorMdview").html('<textarea id="appendTest" style="display:none;"></textarea>');
$("#appendTest").val(content);//将需要转换的内容加到转换后展示容器的textarea隐藏标签中
editormd.markdownToHTML("testEditorMdview", {
htmlDecode: "style,script,iframe", //可以过滤标签解码
emoji: true,
taskList:true,
tex: true, // 默认不解析
flowChart:true, // 默认不解析
sequenceDiagram:true, // 默认不解析
});
}
</script>
至此，我们的图文混排解决方案就告一段落了，这里没有去讲解此插件的源码以及运行原理，重点主要讲解了使用方法。下次有时间再来一起讨论讨论它的实现原理哦。
