1.下载editor.md源文件

https://pandao.github.io/editor.md/#download

2.将下载的源文件放在项目某目录下：

例如：src/assets/editor.md/

3.在angular.json文件中，将所需要引入的css、js文件添加进来

 "styles": ["src/assets/editor.md/css/editormd.css"],"scripts": ["node_modules/jquery/dist/jquery.js","src/assets/editor.md/editormd.min.js",]

4.创建配置文件editor-config.ts

export class EditorConfig {public width = '100%';public height = '400';public path = '/assets/editor.md/lib/';public codeFold: true;public searchReplace = true;public toolbar = true;public emoji = true;public taskList = false;public tex = false;// 数学公式类默认不解析public readOnly = false;public tocm = true;public watch = true;public previewCodeHighlight = true;public saveHTMLToTextarea = true;public markdown = '';public flowChart = false;//流程图public syncScrolling = true;public sequenceDiagram = false;//UML时序图public imageUpload = true;public imageFormats = ['jpg', 'jpeg', 'gif', 'png', 'bmp', 'webp','JPG', 'JPEG', 'GIF', 'PNG', 'BMP', 'WEBP'];public imageUploadURL = '/api/upload/image/markdown';public htmlDecode = 'style,script,iframe';  // you can filter tags decodepublic editorFunction = '';//定义调用的方法public placeholder= '';//  public toolbarIcons = ["undo", "redo", "|", "bold", "hr"]; // tocContainer  = "#custom-toc-container";// tocDropdown   = true;constructor() {}
}

5.html

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

6.ts

import { EditorConfig } from 'xxx/editor-config';//config文件所在路径editor:any;
conf = new EditorConfig();
showInfo:string;//编辑器内容constructor(){}ngAfterViewInit(): void {this.createEditor();
}createEditor(){this.conf.placeholder='请输入内容';this.editor = editormd("mdBox", this.conf); // 创建编辑器$("#mdBox.editormd-preview-container")[0].innerHTML = this.showInfo;//解决右侧预览偶尔显示不出来的问题(编辑功能下的md)this.editor.on('change', ()=> {const textarea = $("#editText");const value= {textarea:textarea.val()}this.showInfo= value.textarea});}