Editor.md开源在线 Markdown 编辑器
本文章主要了解Editor.md开源在线 Markdown 编辑器，Editor.md 使用便捷，用标签生成html，在项目中引用需一下步骤：
1、官网实例
官网https://www.mdeditor.com/ 演示实例 http://editor.md.ipandao.com/#download github下载
2、引用需要的js和样式
3、创建html页面然后去引用样式和js
<%-- EditorMd编辑插件--%>
<link href="../../Js/EditorMd/css/editormd.css" rel="stylesheet" />
<script src="../../Res/jquery-2.0.3/jquery-2.0.3.min.js"></script>
<script src="../../Js/EditorMd/editormd.js"></script>
3.1设置div容器用来渲染
<body>
<div id="test-editormd">
<textarea id="Editormd"></textarea>
</div>
</body>
3.2初始化渲染
<script type="text/javascript">
var testEditor; testEditor = editormd("test-editormd", {
placeholder: '本编辑器支持Markdown编辑，左边编写，右边预览', //默认显示的文字
htmlDecode:"style",//style,script,iframe//编辑是否可插入html标签、样式和js以及嵌入窗体
width: "100%",
height: $(window).height() - 60,
syncScrolling: "single",
path: "../../Js/EditorMd/lib/",//路径是下载后文件中的lib
saveHTMLToTextarea: true,
taskList: true,
tocm: true, // Using [TOCM]
tex: true, // 开启科学公式TeX语言支持，默认关闭
flowChart: true, // 开启流程图支持，默认关闭
sequenceDiagram: true, // 开启时序/序列图支持，默认关闭,
toolbarIcons: function () { // 自定义工具栏 编辑器上方工具栏的功能
return ["undo", "redo", "|", "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|", "h1", "h2", "h3", "h4", "h5", "h6", "|", "list-ul", "list-ol", "hr", "|", "link", "reference-link", "image","code","table", "datetime", "html-entities", "pagebreak", "|", "watch", "clear", "search"]
},
});
</script>
关于编辑器工具栏定义有一下完整实例
full:["undo","redo","|","bold","del","italic","quote","ucwords","uppercase","lowercase","|","h1","h2","h3","h4","h5","h6","|","list-ul","list-ol","hr","|","link","reference-link","image","code","preformatted-text","code-block","table","datetime","emoji","html-entities","pagebreak","|","goto-line","watch","preview","fullscreen","clear","search","|","help","info"],
simple:["undo","redo","|","bold","del","italic","quote","uppercase","lowercase","|","h1","h2","h3","h4","h5","h6","|","list-ul","list-ol","hr","|","watch","preview","fullscreen","|","help","info"],
mini:["undo","redo","|","watch","preview","|","help","info"],
testEditor.getMarkdown();// 在js中调用getMarkdown这个方法可以获得Markdown格式的文本。
"如果可以请多多点赞和关注，我就不没脸的要打赏了。你的鼓励就是我更新的动力，感谢感谢！！！ "
网友评论