Angular中使用Vaditor富文本编辑器

参考和体验地址：

开发文档：https://hacpai.com/article/1549638745630

体验地址：https://hacpai.com/guide/markdown

 

Angular中使用：

1.安装依赖：

npm install vditor --save

2.在代码中引入并初始化对象：

import Vditor from 'vditor'
import "~vditor/src/assets/scss/index"

const vditor = new Vditor(id, {options...})

页面中使用：

test.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vditor/dist/index.css" />
<script src="https://cdn.jsdelivr.net/npm/vditor/dist/index.min.js" defer></script>
<div id="vditor"></div>
<div (click)="getEditorValue()">获取富文本编辑器里面的数据信息</div>

test.ts

import {Component, OnInit} from '@angular/core';
import Vditor from 'vditor';
@Component({
  selector: 'app-testdemo',
  templateUrl: './testdemo.component.html',
  styleUrls: ['./testdemo.component.less']
})
export class TestdemoComponent implements OnInit {
  constructor() {}
  vditor: Vditor; 
  // File:[];
  ngOnInit(): void {
    this.vditor = new Vditor('vditor', {
      toolbarConfig: {
        pin: true,
      },
      cache: {
        enable: false,
      },
      after: () => { 
        // this.vditor.setValue('Hello, Vditor + Angular!');
        //this.vditor.setValue('<p><img src="https://jinqiaooss.oss-cn-beijing.aliyuncs.com/bxshop/2020-08-05/5f2a21b0470f5.jpg" alt="001.jpg" /><br /><img src="https://jinqiaooss.oss-cn-beijing.aliyuncs.com/bxshop/2020-08-05/5f2a21b07cb7b.jpg" alt="002.jpg" /></p>');
      },
      //toolbar:[],
      upload:{
        url:"http://shop.test01.com/api/imgUpload",
        linkToImgUrl:"http://shop.test01.com/api/imgUpload",
        fieldName:"file[]",
        max:1048576,
        format:(File,msg)=>{
          // console.log("============格式化拿到的数据信息File============");
          let customObj={};
          let dealData=JSON.parse(msg)['data'];
          for(let i=0;i<File.length;i++){
            // console.log(File[i]['name']);
            customObj[File[i]['name']]=dealData[i];
          }
          let cusObj={  
            "msg": "",  
            "code": 0,  
            "data": {  
            // "errFiles": ['filename', 'filename2'],  
            "succMap": customObj  
            }  
           }
          return JSON.stringify(cusObj);
        },
        error:(res)=>{
          // console.log("============上传失败返回的数据信息============");
          // console.log(res);
        },
        linkToImgCallback:(responseText)=>{
          // console.log("============图片地址上传的回调数据============");
          // console.log(responseText);
        }
      }
    });
    
  }
  getEditorValue(){
    console.log("============获取编辑器内容============");
    console.log(this.vditor.getValue());
    console.log("============获取编辑器Html内容============");
    console.log(this.vditor.getHTML());
  }

}