editor.md的使⽤（解析出来的html在⽹页显⽰））
源码位于：
这个js就是进⾏markdown进⾏编辑的，并且能够实施显⽰，⼀个demo界⾯如下图：什么即景作文
左侧为markdown语法内容，右侧显⽰出具体展⽰。
获取编辑的html的⽅法是 getMarkdown() 和 getHTML()，作者的⽂档⾥也提供了markdown语法内容直接显⽰出来的例⼦：
<div id="content_id">
</div>
div的id是content_id，在js中会使⽤。
js中如下代码就可以把markdown语法的内容显⽰在这个div⾥(不是覆盖div的内容，是append追加进去)
markdown_content = "## This is markdown demo"
editormd.markdownToHTML("content_id",{markdown : "## This is markdown demo"});
但是通过getHTML()⽅法获取的html源⽂件如何展⽰呢通过研究markdownToHTML这个⽅法中如下这⼀句
div.addClass("markdown-body " + this.classPrefix + "html-preview").append(markdownPard)
this.classPrefix是editormd- 字符串，在editor.md中是⼀个常量值。
从⽽通过getHTML获取的html内容可以通过如下⽅法正确展⽰
//获取html内容
var htmlContent = HTML();
港珠澳大桥简介//content_id是某个节点，例如是div的id，从⽽在这个div⾥展⽰
$("#content_id").addClass("markdown-body editormd-html-preview").append(htmlContent)
这种⽅式，对于表格等能够展⽰了，⽽时序图、流程图 不能正确展⽰，⽽预览中明明能够都正常显⽰，还不知道为什么，待续。。。。。。
-----------------------------------------------------------------------------------------------------------------------------
对 markdownToHTML ⽅法进⾏了分析，查看其进⾏⽣成转换的原理，并基于这个⽅法，进⾏修改，完成了通过 editor.md ⽣成的html 字符串 进⾏前台 页⾯上显⽰，话不多说 直接上代码（代码中还保留了markdownToHTML⽅法的代码，已经注释掉的，便于分析查看），在下⾯的代码中 toc的内容我们是通过查找h1到h6的⽅式找到这些信息（markdownToHTML中是通过marked进⾏语法分析，然后对这些内容⼜经过⽂本处理 获得的这些h1到h6信息，获得数组集合，每⼀个对象包含的字段是text level slug，其中slug对于最终⽣成的标题 没有使⽤的）
editormd.HTMLToPreview = function(id, html, options) {
var defaults = {
gfm : true,清明日期
toc : true,
tocm : fal,
tocm : fal,
tocStartLevel : 1,
tocTitle : "⽬录",
tocDropdown : fal,
tocContainer : "",
markdown : "",
markdownSourceCode : fal,
htmlDecode : fal,
autoLoadKaTeX : true,
pageBreak : true,
atLink : true, // for @link
emailLink : true, // for mail address auto link
tex : fal,
taskList : fal, // Github Flavored Markdown task lists
emoji : fal,
flowChart : fal,
quenceDiagram : fal,
previewCodeHighlight : true,
lector:"h1,h2,h3,h4,h5,h6" //⽣成⽬录时的选择器
};
editormd.$marked = marked;
var div = $("#" + id);
var ttings = ings = $.extend(true, defaults, options || {});
// var saveTo = div.find("textarea");
//
// if (saveTo.length < 1)
// {
// div.append("<textarea></textarea>");
// saveTo = div.find("textarea");
// }
// var markdownDoc = (ttings.markdown === "") ? saveTo.val() : ttings.markdown;
var markdownToC = [];
/
/ var rendererOptions = {
// toc : ,
// tocm : ,
// tocStartLevel : StartLevel,
机灵小子// taskList : ttings.taskList,
// emoji : ji,
// tex : ,
// pageBreak : ttings.pageBreak,
// atLink : ttings.atLink, // for @link
// emailLink : ailLink, // for mail address auto link
// flowChart : ttings.flowChart,
/
最萌身高差是多少/ quenceDiagram : ttings.quenceDiagram,
// previewCodeHighlight : ttings.previewCodeHighlight,
// };
// var markedOptions = {
// renderer : editormd.markedRenderer(markdownToC, rendererOptions),
// gfm : ttings.gfm,
// tables : true,
// breaks : true,
// pedantic : fal,
// sanitize : (ttings.htmlDecode) ? fal : true, // 是否忽略HTML标签，即是否开启HTML标签解析，为了安全性，默认不开启 // smartLists : true,
// smartypants : true
// };
//新版本的marked需要是string（旧版本使⽤的是String）
// markdownDoc = new String(markdownDoc);
// var markdownPard = marked(markdownDoc, markedOptions);
var markdownPard = html;
// if (ttings.markdownSourceCode) {
// (markdownDoc);
// } el {
// ve();
// }
div.addClass("markdown-body " + this.classPrefix + "html-preview").append(markdownPard);
平面的投影
var tocContainer = (Container !== "") ? $(Container) : div;
if (Container !== "")
{
tocContainer.attr("previewContainer", fal);
}
if ()
{
//通过查找lector来找出⽣成⽬录所需的标题信息
var nodes = document.querySelectorAll(ttings.lector);
var headings = [];
Array.prototype.forEach.call(nodes, function (node) {
headings.push({
text: node.innerText,
level: parInt(place(/[h]/i, ''), 10),
slug:""//没有使⽤
});
});
if (Dropdown || div.find("." + this.classPrefix + "toc-menu").length > 0)
{
}
if (Container !== "")
{
div.find(".editormd-toc-menu, .editormd-markdown-toc").remove();
}
}
if (ttings.previewCodeHighlight)
{
div.find("pre").addClass("prettyprint linenums");
prettyPrint();
}
if (!editormd.isIE8)
{
if (ttings.flowChart) {
胎元饮div.find(".flowchart").flowChart();
}
if (ttings.quenceDiagram) {
div.find(".quence-diagram").quenceDiagram({theme: "simple"});
}
}
if ()
{
var katexHandle = function() {
div.find("." + ).each(function(){
div.find("." + ).each(function(){
var tex = $(this);
});
};
if (ttings.autoLoadKaTeX && !editormd.$katex && !editormd.kaTeXLoaded) {
this.loadKaTeX(function() {
editormd.$katex = katex;
editormd.kaTeXLoaded = true;
katexHandle();
});
}
el
{
katexHandle();
}
}
苏步青return saveTo.val();
};
return div;
};
