编辑文章

描述:

封面图上传：

点击上传图片

# angluar 使用markdown编辑器vditor
1. npm 安装
```js
npm install vditor --save --force
```
2. angular.json引入样式文件**node_modules/vditor/src/assets/less/index.less**
```js
  "styles": [
         "node_modules/vditor/src/assets/less/index.less",
		 ]
```
3. component.ts中导入vditor
```js
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中
```html
  <div id="vditor"></div>
```
5. 完成