editor.md是国内开源的一款在线Markdown编辑器，可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。

GitHub:https://github.com/pandao/editor.md

安装依赖

# npmnpm install jquery# yarnyarn add jquery

资源下载

下载editor.md的的文件，并放置到assets文件夹中，如src/assets/editor.md/
也可以通过 NPM 安装：

npm install editor.md

或者通过 Bower 安装：

bower install editor.md

本文后面讲的是直接下载文件资源方式。

配置

angular.json中的build中配置editor.md的css和js路径

"styles": ["src/assets/md_editor/css/editormd.css","src/assets/md_editor/lib/codemirror/codemirror.min.css",],
"scripts": ["./node_modules/jquery/dist/jquery.js","src/assets/md_editor/lib/flowchart.min.js","src/assets/md_editor/lib/jquery.flowchart.min.js","src/assets/md_editor/js/editormd.min.js","src/assets/md_editor/lib/codemirror/codemirror.min.js","src/assets/md_editor/lib/marked.min.js","src/assets/md_editor/lib/prettify.min.js","src/assets/md_editor/lib/underscore.min.js","src/assets/md_editor/lib/raphael.min.js","src/assets/md_editor/lib/sequence-diagram.min.js"]

在app文件下创建一个editor文件夹，在里面创建一个编辑器配置文件editor-config.ts

• editor-config.ts

declare var $: any;
declare var editormd: any;export class EditorConfig {// public width = '100%';public width = '868';public height = '558';public path = './assets/md_editor/lib/';public codeFold: true;public placeholder = '请输入正文内容'; // 输入提示public searchReplace = true;public toolbar = true;public emoji = false; // 关闭外部emoji工具public taskList = true;public tex = true;// 数学公式类默认不解析public readOnly = false;public tocm = true;public watch = false; // 是否右边展示实时预览public previewCodeHighlight = true;public saveHTMLToTextarea = true; // 保存HTML到Textarea中public markdown = '';public flowChart = true;//流程图public syncScrolling = true;public sequenceDiagram = true;//UML时序图public imageUpload = true;public imageFormats = ['jpg', 'jpeg', 'gif', 'png', 'bmp', 'webp'];// public crossDomainUpload = true;// public imageUploadURL = ''; // 上传图片的接口// public htmlDecode = 'style,script,iframe';    // public uploadCallbackURL = ""public htmlDecode = "style,script,iframe,sub,sup|on*"; // 开启HTML标签解析，可以过滤html的标签解析,为了安全性，默认不开启public toolbarIcons = function () {// Or return editormd.toolbarModes[name]; // full, simple, mini// Using "||" set icons align right.return [ "bold","italic","h1","h2","del","|","list-ul","list-ol","hr","quote","code-block","table","link","watch","|","fullscreen","file","imageUpload","|","undo","redo",]};public toolbarIconsClass = {imageUpload: "fa-file-image-o",// 指定一个FontAawsome的图标类};public toolbarIconTexts = {// 如果没有图标，则可以这样直接插入内容，可以是字符串或HTML标签// file: `<div><input type="file" name="file" id="uploadImage" class="inputfile" style="position:absolute;opacity:0;" accept="image/png,image/jpeg,image/gif,image/jpg,image/svg" /> // <label for="file" style="cursor:pointer;">上传文件</label></div>`};// 自定义工具栏按钮的事件处理public toolbarHandlers = {/*** @param {Object}      cm         CodeMirror对象* @param {Object}      icon       图标按钮jQuery元素对象* @param {Object}      cursor     CodeMirror的光标对象，可获取光标所在行和位置* @param {String}      selection  编辑器选中的文本*/imageUpload: function (cm, icon, cursor, selection) {// deal upload event$('#uploadImage').click();$('#uploadImage').unbind().bind("change", e => {let fd = new FormData();// 添加到fd对象中等待提交fd.append("files", e.target['files'][0]);if(!fd) return;$.ajax({type: 'post',url: '/api/v1/upload',data: fd,cache: false,contentType: false,processData: false,success: data => {if (data && data.length > 0) {// cm.replaceSelection("![](http://10.0.10.7:10020" + data[0] + ")" + selection);// 生产环境使用相对路径cm.replaceSelection("![](" +  data[0] + ")" + selection);}}})})console.log("imageUpload =>", icon.html());},};// 用于增加自定义工具栏的功能，可以直接插入HTML标签，不使用默认的元素创建图标public toolbarCustomIcons =  {file: `<input type="file" name="file" id="uploadImage" class="inputfile" style="position:absolute;opacity:0;" accept="image/png,image/jpeg, image/gif,image/jpg,image/svg,image/xbm,image/pgm,image/xpm" /> `};public lang = {toolbar: {imageUpload: "图片上传",  // 自定义按钮的提示文本，即title属性}};public editorFunction = '';//定义调用的方法constructor() { }
}

在具体组件中使用

• html

<div id="markdown" ><textarea id="editText" style="display: block;"></textarea>
</div>

• ts

import { EditorConfig } from 'xxx/editor-config';//config文件所在路径editor:any;
conf = new EditorConfig();
showInfo:string;//编辑器内容constructor(){}ngAfterViewInit(): void {this.createEditor();
}createEditor(){this.editor = editormd("markdown", this.conf); // 创建编辑器// //解决右侧预览偶尔显示不出来的问题(编辑功能下的md)$("#markdown.editormd-preview-container")[0].innerHTML = this.showInfo;// 在没有开预览模式下获取编辑状态下的值// let iputData = $('#markdown .editormd-markdown-textarea').val();// 编辑器事件监听this.editor.on('change', ()=> {const textarea = $("#editText");const value= {textarea:textarea.val()}this.showInfo= value.textarea});}

注意： 由于editor.md编辑器中自带一些图片和emoji资源，需要从github或者外网加载过来，这样就会对网页性能有一些影响，有需要可以考虑在样式文件中替换掉。还有一些加载空表格和图片上传组件的问题，这里就不赘述了。