angluar 使用markdown编辑器vditor

1. npm 安装

   npm install vditor --save --force

2. angular.json引入样式文件node_modules/vditor/src/assets/less/index.less

   "styles": [
         "node_modules/vditor/src/assets/less/index.less",
         ]

3. component.ts中导入vditor

   import { Component, OnInit } from '@angular/core';
   import {ActivatedRoute} from '@angular/router';
   import Vditor from 'vditor';
   @Component({
   selector: 'app-article-detail',
   templateUrl: './article-detail.component.html',
   styleUrls: ['./article-detail.component.less'],
   })
   export class ArticleDetailComponent implements OnInit {
    vditor: Vditor; 
    constructor(private activatedRoute: ActivatedRoute) { }
    ngOnInit() {
        this.vditor = new Vditor('vditor', {
            height: 360,
            //"dark" | "light"
            mode: "wysiwyg",
            theme: "dark",
            toolbarConfig: {
              pin: true,
            },
            cache: {
              enable: false,
            },
            after: () => {
              this.vditor.setValue('Hello, Vditor + Angular!');
            }
          });
    }
   }

4. html中

   <div id="vditor"></div>

5. 完成