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(markdownParsed)
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 : false,
tocm : false,
tocStartLevel : 1,
tocTitle : "⽬录",
tocDropdown : false,
tocContainer : "",
markdown : "",
markdownSourceCode : false,
htmlDecode : false,
autoLoadKaTeX : true,
pageBreak : true,
atLink : true, // for @link
emailLink : true, // for mail address auto link
tex : false,
taskList : false, // Github Flavored Markdown task lists
emoji : false,
flowChart : false,
sequenceDiagram : false,
previewCodeHighlight : true,
selector:"h1,h2,h3,h4,h5,h6" //⽣成⽬录时的选择器
};
editormd.$marked = marked;
var div = $("#" + id);
var settings = div.settings = $.extend(true, defaults, options || {});
// var saveTo = div.find("textarea");
//
// if (saveTo.length < 1)
// {
// div.append("<textarea></textarea>");
// saveTo = div.find("textarea");
// }
// var markdownDoc = (settings.markdown === "") ? saveTo.val() : settings.markdown;
var markdownToC = [];
/
/ var rendererOptions = {
// toc : ,
// tocm : ,
// tocStartLevel : StartLevel,
// taskList : settings.taskList,
// emoji : ji,
// tex : ,
// pageBreak : settings.pageBreak,
// atLink : settings.atLink, // for @link
// emailLink : ailLink, // for mail address auto link
// flowChart : settings.flowChart,
/
/ sequenceDiagram : settings.sequenceDiagram,
// previewCodeHighlight : settings.previewCodeHighlight,
// };
// var markedOptions = {
// renderer : editormd.markedRenderer(markdownToC, rendererOptions),
// gfm : settings.gfm,
// tables : true,
// breaks : true,
// pedantic : false,
// sanitize : (settings.htmlDecode) ? false : true, // 是否忽略HTML标签，即是否开启HTML标签解析，为了安全性，默认不开启 // smartLists : true,
// smartypants : true
// };
//新版本的marked需要是string（旧版本使⽤的是String）
// markdownDoc = new String(markdownDoc);
// var markdownParsed = marked(markdownDoc, markedOptions);
var markdownParsed = html;
// if (settings.markdownSourceCode) {
// (markdownDoc);
// } else {
// ve();
// }
div.addClass("markdown-body " + this.classPrefix + "html-preview").append(markdownParsed);
var tocContainer = (Container !== "") ? $(Container) : div;
if (Container !== "")
{
tocContainer.attr("previewContainer", false);
}
if ()
{
//通过查selector来出⽣成⽬录所需的标题信息
var nodes = document.querySelectorAll(settings.selector);
var headings = [];
Array.prototype.forEach.call(nodes, function (node) {
headings.push({
text: node.innerText,
level: parseInt(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 (settings.previewCodeHighlight)
{
div.find("pre").addClass("prettyprint linenums");
prettyPrint();
}
if (!editormd.isIE8)
{
if (settings.flowChart) {
div.find(".flowchart").flowChart();
}
if (settings.sequenceDiagram) {
div.find(".sequence-diagram").sequenceDiagram({theme: "simple"});
}
}
if ()
{
var katexHandle = function() {
div.find("." + ).each(function(){
div.find("." + ).each(function(){
var tex = $(this);
});
};
如何查看html代码if (settings.autoLoadKaTeX && !editormd.$katex && !editormd.kaTeXLoaded) {
this.loadKaTeX(function() {
editormd.$katex = katex;
editormd.kaTeXLoaded = true;
katexHandle();
});
}
else
{
katexHandle();
}
}
return saveTo.val();
};
return div;
};
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论