markdown editor

官方文档：https://github.com/pandao/editor.md
1.安装
npm install editor.md
bower install editor.md
2.angular配置`
angular.json 中配置 editor.md 的 css 和 js 路径

    "styles": [
         "src/assets/editor.md/css/editormd.css"
       ],
     "scripts": [
         "node_modules/jquery/dist/jquery.js",
         "src/assets/editor.md/editormd.min.js",
         "src/assets/editor.md/lib/marked.min.js",//解析markdown用到的js路径
         "src/assets/editor.md/lib/prettify.min.js"//解析markdown用到的js路径
       ]

config.ts

 export class EditorConfig {
      public width = '100%';
      public height = '400';
      public path = './assets/md_editor/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'];
      public imageUploadURL = '';
      public htmlDecode = 'style,script,iframe';  // you can filter tags decode
      public editorFunction = '';//定义调用的方法
      constructor() {
      }
  }
      //获取编辑器内容
    var blogcontent = encodeURIComponent(testEditor.getMarkdown());

component:
通过调用 editormd 的方法 editormd.markdownToHTML ('editor', this.conf); 其中 editor, 表示需要对该 div 下面的 textarea 里面的 markdown 内容进行渲染

import { ChangeDetectorRef, Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';
import { Router } from '@angular/router';
import { _HttpClient } from '@delon/theme';

import {EditorConfig} from '../../../shared/utils/editor-config';
declare var editormd: any;
import * as $ from 'jquery';
@Component({
  selector: 'app-license-info',
  templateUrl: './license-info.component.html',
})
export class LicenseInfoComponent implements OnInit, AfterViewInit {
  conf = new EditorConfig();
  editor: any;
  markdown = '测试语句';

  constructor(
    private http: _HttpClient,
    private msg: NzMessageService,
    private cdr: ChangeDetectorRef,
    private router: Router
  ) {}

  ngOnInit() {
      editormd.markdownToHTML('editor', this.conf)
  }
 
}

html: