一、下载依赖
官方地址：https://pandao.github.io/editor.md/
二、页面代码
1、需要使用到的依赖资源
除了上述资源外，还需要引入jquery.js，该js引入部分需要放置在editormd.min.js引入之前。
2、代码整合
<html> <head> <title>集成Markdown编辑器测试</title> <link rel="stylesheet" href="./css/editormd.min.css"> <script src="./jquery.js"></script> <script src="./editormd.min.js"></script> <style type="text/css"> .markDownDiv{ z-index: 1 !important } </style> </head> <body> <div id="markDownDiv" class="markDownDiv"> <textarea name="markDownContent" placeholder="请输入文本内容" style="display: none"></textarea> </div> <body> <script type="text/javascript"> // 初始化编辑器 var markDownEditor; $(function() { // 编辑器名称要与页面中应放置的区域id保持一致 markDownEditor = editormd("markDownDiv", { // 宽度 width: 800, // 高度 height: 600, // 滚动条纵向滚动,设置为false取消滚动 syncScrolling : "single", // lib资源路径 path: "./lib/", // 编辑器工具栏区域样式风格 theme: "dark", // 编辑器编辑部分样式风格 editorTheme: "pastel-on-dark", // 预览区域样式风格 previewTheme: "dark", // 开启表情使用 emoji: true, }); }); </script> </html>
3、效果预览
