本文使用[Editor.md](https://pandao.github.io/editor.md/ "Editor.md"),一个开源的`Markdown`编辑器 ### 1.引入依赖 ```html <link rel="stylesheet" href="./dep/editor.md/css/editormd.min.css"/> <script src="./dep/jquery/jquery.min.js"></script> <script src="./dep/editor.md/editormd.min.js"></script> ``` ### 2.在HTML文件中设置id ```html <div id="test-editormd"> <textarea style="display:none;"></textarea> </div> ``` ### 3.初始化Editor.md ```javascript var testEditor; testEditor = editormd("test-editormd", { width: "90%", height: 740, path: '../lib/', //填写对应的目录 theme: "dark", previewTheme: "dark", editorTheme: "pastel-on-dark", markdown: "", //这里是初始的文本 codeFold: true, //syncScrolling : false, saveHTMLToTextarea: true, // 保存 HTML 到 Textarea searchReplace: true, //watch : false, // 关闭实时预览 htmlDecode: "style,script,iframe|on*", // 开启 HTML 标签解析,为了安全性,默认不开启 //toolbar : false, //关闭工具栏 //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮,默认开启 emoji: true, taskList: true, tocm: true, // Using [TOCM] tex: true, // 开启科学公式TeX语言支持,默认关闭 flowChart: true, // 开启流程图支持,默认关闭 sequenceDiagram: true, // 开启时序/序列图支持,默认关闭, //dialogLockScreen : false, // 设置弹出层对话框不锁屏,全局通用,默认为true //dialogShowMask : false, // 设置弹出层对话框显示透明遮罩层,全局通用,默认为true //dialogDraggable : false, // 设置弹出层对话框不可拖动,全局通用,默认为true //dialogMaskOpacity : 0.4, // 设置透明遮罩层的透明度,全局通用,默认值为0.1 //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色,全局通用,默认为#fff imageUpload: true, imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"], imageUploadURL: "./php/upload.php", //图片上传的地址 onload: function () { console.log('onload', this); //this.fullscreen(); //this.unwatch(); //this.watch().fullscreen(); //this.setMarkdown("#PHP"); //this.width("100%"); //this.height(480); //this.resize("100%", 640); } }); ``` 这样Markdown编辑器就引入到了页面中 ### 4.获取编辑器的内容 ```javascript testEditor.getMarkdown(); // 获取 Markdown 源码 testEditor.getHTML(); // 获取 Textarea 保存的 HTML 源码 testEditor.getPreviewedHTML(); // 获取预览窗口里的 HTML,在开启 watch 且没有开启 saveHTMLToTextarea 时使用 ``` ### 5.页面中展示Markdown文本 ###### 1.首先引入相应的依赖 ```html <link rel="stylesheet" href="./dep/editor.md/css/editormd.min.css"/> <script src="./dep/jquery/jquery.min.js"></script> <script src="./dep/editor.md/lib/marked.min.js"></script> <script src="./dep/editor.md/lib/prettify.min.js"></script> <script src="./dep/editor.md/lib/raphael.min.js"></script> <script src="./dep/editor.md/lib/underscore.min.js"></script> <script src="./dep/editor.md/lib/sequence-diagram.min.js"></script> <script src="./dep/editor.md/lib/flowchart.min.js"></script> <script src="./dep/editor.md/lib/jquery.flowchart.min.js"></script> <script src="./dep/editor.md/editormd.min.js"></script> ``` ###### 2.设置div ```html <div> <div id="test-editormd-view"></div> </div> ``` ###### 3.js代码 ```javascript editormd.markdownToHTML("test-editormd-view", { markdown : content, //这里设置Markdown文本 //htmlDecode : true, // 开启 HTML 标签解析,为了安全性,默认不开启 htmlDecode : "style,script,iframe", // you can filter tags decode //toc : false, tocm : true, // Using [TOCM] //tocContainer : "#custom-toc-container", // 自定义 ToC 容器层 //gfm : false, //tocDropdown : true, // markdownSourceCode : true, // 是否保留 Markdown 源码,即是否删除保存源码的 Textarea 标签 emoji : true, taskList : true, tex : true, // 默认不解析 flowChart : true, // 默认不解析 sequenceDiagram : true, // 默认不解析 }); ``` 这样我们获取了之前保存的Markdown文本之后就能在页面中直接展示了。 ### 6.图片上传 ###### 1.图片上传开启 ```javascript imageUpload: true, imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"], imageUploadURL: "./php/upload.php", //图片上传的地址 ``` ###### 2.后台要使用`editormd-image-file`来接收上传的文件 ###### 3.后台设置返回以下json内容 ```json { success : 0 | 1, //0表示上传失败;1表示上传成功 message : "提示的信息", url : "图片地址" //上传成功时才返回 } ``` ### 7.网站&源码 - 网站:[Editor.md](https://pandao.github.io/editor.md/ "Editor.md") - 源码:[Github](https://github.com/pandao/editor.md "Github")