angular7+editor.md

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 decode
    public 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
    });
  }