# 概述 Editor.md 是国内开源的一款在线 Markdown 编辑器,可嵌入的 Markdown 在线编辑器(组件),基于 CodeMirror、jQuery 和 Marked 构建。 Editor.md 特性 >支持“标准”Markdown / CommonMark和Github风格的语法,也可变身为代码编辑器; 支持实时预览、图片(跨域)上传、预格式文本/代码/表格插入、代码折叠、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能; 支持ToC(Table of Contents)、Emoji表情、Task lists、@链接等Markdown扩展语法; 支持TeX科学公式(基于KaTeX)、流程图 Flowchart 和 时序图 Sequence Diagram; 支持识别和解析HTML标签,并且支持自定义过滤标签解析,具有可靠的安全性和几乎无限的扩展性; 支持 AMD / CMD 模块化加载(支持 Require.js & Sea.js),并且支持自定义扩展插件; 兼容主流的浏览器(IE8+)和Zepto.js,且支持iPad等平板设备; 支持自定义主题样式; # 用法 ## 下载 和 安装 **直接下载安装** 直接到[官网](http://editor.md.ipandao.com "官网")或 [github](https://github.com/pandao/editor.md "github") 上下载,下载解压后,将所有文件和文件夹都放到 `app/public` 目录下,也可以选择性的把不需要的文件夹移除掉,比如 `examples` 目录、`README.md` 文件等。 **通过 NPM 安装** ``` npm install editor.md // 或 bower install editor.md ``` > 因为是通过 Egg.js 的模板引擎的方式开发,所以这里推荐使用直接下载安装 ## 发布文章 这里我们使用 Egg.js 的模板引擎的方式引入 Editor.md,如果是通过前后端分离的方式开发的,那么如果你使用的是 Vue.js 就直接在 Vue.js 中引入就可以了,这里就不赘述了。 ### 前端引入 以 ejs 模板引擎为例,在你需要使用富文本编辑器的页面中引入下列代码 如:`article.html` ```html <!-- 在页面 head 中引入 --> <link rel="stylesheet" href="/public/editormd/css/editormd.css" /> <!-- 在页面 需要使用编辑器的位置 引入 --> <div id="test-editormd"> <textarea name="detail"></textarea> </div> <!-- 在页面底部引入 --> <script src="/public/js/jquery.min.js"></script> <script src="/public/editormd/editormd.min.js"></script> <script type="text/javascript"> // 第一个参数对应上面 html 中的 id 属性值 let testEditor = editormd('test-editormd', { width: '100%', height: 740, path: '/public/editormd/lib/', // 根据你的 editormd 实际目录位置修改 // markdown: md, 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: '/admin/article/editorUploadPic?_csrf=<%= csrf %>' // 图片上传请求接口 // 图片上传接口必须返回以下格式 /* 后端需返回: { success : 0 | 1, //0表示上传失败;1表示上传成功 message : "提示的信息", url : "图片地址" //上传成功时才返回 }*/ // 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); // } }) </script> ``` ### 后台保存内容 后台保存内容和表单提交的方法一样,需要注意的是如果开启了图片上传功能需要按照 Editor.md 规定的格式返回 如:`app/controller/article.js` ```js const Controller = require('egg').Controller; class ArticleController extends Controller { // 省略其它表单保存逻辑代码 .... // Editor.md 图片上传 async editorUploadPic(){ const { ctx } = this; // 这里开始处理图片上传逻辑 // 省略上传逻辑代码 // 根据图片上传返回的结果,按 editormd 要求格式返回 ctx.body = { success : 1, // 0表示上传失败; 1表示上传成功 message : "上传成功", url : filepathNew.split(this.config.baseDir+'\\app')[1] // 上传成功时才返回 } } module.exports = ArticleController; ``` ### 配置路由 路由配置图片上传接口 router.js ```js router.post('/admin/article/editorUploadPic', controller.admin.article.editorUploadPic) ``` ## 读取文章 - markdownToHTML > 必须引入 editormd.css 文件 > 引入的 js 文件顺序最好按下面的顺序引入,或参考下载下来压缩包内的 `examples/html-preview-markdown-to-html.html` 中的顺序 如:`detail.html` ```html <!-- head 中引入 --> <link rel="stylesheet" href="/public/editormd/css/editormd.css" /> <!-- 如果需要自定义代码高亮,可以使用 heighlightBlock.js --> <link rel="stylesheet" href="/public/editormd/css/atom-one-dark.css" /> <script src="/public/editormd/highlight.min.js"></script> <!-- body 中引入 --> <div class="content" id="detail"> <%= detail %> </div> <div id="test-editormd-view"></div> <!-- 页面底部引入 --> <script src="/public/js/jquery.min.js"></script> <script src="/public/editormd/lib/marked.min.js"></script> <script src="/public/editormd/lib/prettify.min.js"></script> <script src="/public/editormd/lib/raphael.min.js"></script> <script src="/public/editormd/lib/underscore.min.js"></script> <script src="/public/editormd/lib/sequence-diagram.min.js"></script> <script src="/public/editormd/lib/flowchart.min.js"></script> <script src="/public/editormd/lib/jquery.flowchart.min.js"></script> <script src="/public/editormd/editormd.js"></script> <script type="text/javascript"> $(function() { var markdown = $('#detail').text().trim() editormd.markdownToHTML('test-editormd-view', { markdown: markdown, //+ "\r\n" + $("#append-test").text(), htmlDecode: 'style,script,iframe', // you can filter tags decode tocm: true, // Using [TOCM] emoji: false, taskList: true, tex: true, // 默认不解析 flowChart: true, // 默认不解析 sequenceDiagram: true // 默认不解析 }) // 如果需要自定义代码高亮,可以使用 heighlightBlock.js $('code').each(function(i, block) { hljs.highlightBlock(block) }) }) </script> ```