<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8" /> <title>Using Zepto.js - Editor.md examples</title> <link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="../css/editormd.css" /> <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" /> </head> <body> <div id="layout"> <header> <h1>Using Zepto.js</h1> <ul style="margin: 10px 0 0 18px;"> <li>Enable HTML tags decode</li> <li>Enable TeX, Flowchart, Sequence Diagram, Emoji, FontAwesome, Task lists</li> <li>Enable Image upload</li> <li>Enable [TOCM], Search Replace, Code fold</li> </ul> </header> <div class="btns"> <button id="show-btn">Show editor</button> <button id="hide-btn">Hide editor</button> <button id="get-md-btn">Get Markdown</button> <button id="get-html-btn">Get HTML</button> <button id="watch-btn">Watch</button> <button id="unwatch-btn">Unwatch</button> <button id="preview-btn">Preview HTML (Press Shift + ESC cancel)</button> <button id="fullscreen-btn">Fullscreen (Press ESC cancel)</button> <button id="show-toolbar-btn">Show toolbar</button> <button id="close-toolbar-btn">Hide toolbar</button> <button id="toc-menu-btn">ToC Dropdown menu</button> <button id="toc-default-btn">ToC default</button> </div> <form action="http://editormd.ipandao.com/php/post.php" method="post"> <div class="editormd" id="test-editormd"> <textarea>### Hello world!</textarea> </div> <br/><input type="submit" name="submit" value="Submit" class="btn" style="margin-left: 5%;" /> </form> </div> <script src="js/zepto.min.js"></script> <script src="../editormd.js"></script> <script type="text/javascript"> var testEditor; var jQuery = Zepto; // 为了避免修改 flowChart.js 和 sequence-diagram.js 的源码,所以想支持 flowChart / sequenceDiagram 就得加上这一句 $(function() { $.get("./test.md", function(md){ testEditor = editormd("test-editormd", { width : "90%", height : 720, path : '../lib/', markdown : md, codeFold : true, searchReplace : true, saveHTMLToTextarea : true, // 保存 HTML 到 Textarea //watch : false, htmlDecode : "style,script,iframe|on*", // 开启 HTML 标签解析,为了安全性,默认不开启 emoji : true, taskList : true, tocm : true, // Using [TOCM] tex : true, // 开启科学公式 TeX 语言支持,默认关闭 //previewCodeHighlight : false, // 关闭预览窗口的代码高亮,默认开启 flowChart : true, sequenceDiagram : true, // 同上 onload : function() { console.log("onload =>", this, this.id, this.settings); } }); }); $("#show-btn").bind('click', function(){ testEditor.show(); }); $("#hide-btn").bind('click', function(){ testEditor.hide(); }); $("#get-md-btn").bind('click', function(){ alert(testEditor.getMarkdown()); }); $("#get-html-btn").bind('click', function() { alert(testEditor.getHTML()); }); $("#watch-btn").bind('click', function() { testEditor.watch(); }); $("#unwatch-btn").bind('click', function() { testEditor.unwatch(); }); $("#preview-btn").bind('click', function() { testEditor.previewing(); }); $("#fullscreen-btn").bind('click', function() { testEditor.fullscreen(); }); $("#show-toolbar-btn").bind('click', function() { testEditor.showToolbar(); }); $("#close-toolbar-btn").bind('click', function() { testEditor.hideToolbar(); }); $("#toc-menu-btn").click(function(){ testEditor.config({ tocDropdown : true, tocTitle : "目录 Table of Contents", }); }); $("#toc-default-btn").click(function() { testEditor.config("tocDropdown", false); }); }); </script> </body> </html>