wangEditor 富文本 angular

<wang-Editor *ngIf='show' #wangEditor [editorData]="editorData" ></wang-Editor>

import { Component, OnInit,ViewChild } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormBuilder, FormGroup} from '@angular/forms';
import { NzMessageService } from 'ng-zorro-antd/message';
import { editSysNotice,readSysNoticeDto } from '@api/zhjg/sysNotice';
import { DomSanitizer } from '@angular/platform-browser';
import { UploadChangeParam, UploadFile } from 'ng-zorro-antd/upload';

import { download,upload } from '@api/member/file';
// import ImageView from '../../orginfo/info/tabBase/ImageView.js';
import ImageView from '@shared/utils/ImageView';
import { getServer } from 'src/app/request';
import { stringify } from '@angular/compiler/src/util';


@Component({
  selector: 'app-notice-add',
  templateUrl: './notice-add.component.html',
  styleUrls: ['./notice-add.component.less'],
})

export class NoticeAddComponent implements OnInit {

  @ViewChild('wangEditor',{ static: false }) public save : any;

  public loading = false;
  /**提交form的表单数据 */
  public noticeForm: FormGroup;

  /**暂存 点击 编辑携带id */
  public noticeId:"";
  public editorData;

   /** 文件多选列表 */
   public UploadFileList = [];


  /** 图片查看器的图片列表 */
  public lookpicList: string[] = [];
  /** 大图路径 */
  public imgUrl = '';
  /**大图弹窗 */
  previewVisible = false;
  show=false

  // tslint:disable-next-line: no-object-literal-type-assertion
  // public info: CompanyContractViewResponse = {} as CompanyContractViewResponse;
  constructor(private router: Router, private route: ActivatedRoute,private sanitizer: DomSanitizer,private fb: FormBuilder,private message:NzMessageService) {
    this.noticeForm = this.fb.group({
      noticeType:"",
      content:"",
      title:"",
      fileType:"tzfj"
    })
  }
  ngOnInit() {

    /** ActivatedRoute 监听路由 变化 */
    this.route.queryParams.subscribe(async params  => {
      /**如果跳转过来时  id为空时是新增 */
      if(!params.id){
        this.show=true
      }
      if(!params.id) return;

      /**暂存id 提交时更改 使用 */
      this.noticeId =params.id;
     const res= await readSysNoticeDto({ noticeId: params.id })
        /**回显form 数据 */
        this.noticeForm.reset({
          noticeType:res.noticeType,
          title:res.title,
        })
        this.editorData=res.content
        this.show=true
        console.log(' this.editorData', this.editorData);

        /**回显附件数据
         * createTime: "2021-01-15 17:24:36"

         */
        // this.UploadFileList = res.fileInfoList;
        if(Array.isArray(res.fileInfoList)){
            this.UploadFileList = res.fileInfoList.map(it=>{

            return {
              name:it.fileName,
              uid:it.fileId,
              fileName:it.fileName,
              fileSize:it.fileSize,
              fileUrl:it.fileUrl,
              fileKey:it.fileKey,

            }
          });
        }

      console.log(res.fileInfoList,"编辑")

    });

  }


  /**提交操作 */
  handleSubmit(){
    this.save.editorOut() // 执行子组件方法
    console.log(this.save.data);

    /**必填验证 */
    if(!this.noticeForm.value.noticeType){
      return this.message.error('请选类别');

     }
    if(!this.noticeForm.value.title){
     return this.message.error('请输标题');

    }
    console.log(this.save.data.length);

    if(this.save.data.length>10000){
      return this.message.error(`通知内容不能超过10000字符（当前字符数${this.save.data.length}）`);

     }
    const postParams={
      noticeType:this.noticeForm.value.noticeType,
      title:this.noticeForm.value.title,
      // content:this.noticeForm.value.content,
      content:this.save.data,
      fileType:"tzfj",
      noticeId:this.noticeId,
      fileInfoRequestList:this.handleDisponseFile(this.UploadFileList)
    }
    /** 新增提交时 删除id  */
    if(!this.noticeId){
      delete postParams.noticeId;
    }
    editSysNotice(postParams).then(res => {
        this.message.success("提交成功")
      /**情况提交内容 */
      this.noticeForm.reset();
      this.UploadFileList=[];
      /**跳转到列表*/
      this.handleCancel();
     });
  }
  /**
   * 处理通知内容的 空格和换行
   */
  handleText(){

  }
  /** 取消操作 回到列表页*/
  handleCancel(){
    console.log("取消操作")
    this.router.navigate(['/notice'], {
      queryParams: {
        id: new Date(),
      },
    });
  }
  /**上传 */
  handleChange({ file, fileList }: UploadChangeParam): void {
    console.log(file,"file",this.UploadFileList)
    const status = file.status;
    if (status !== 'uploading') {

    }
    if (status === 'done') {
      this.message.success(`${file.name} 文件上传完成.`);
      console.log(file.response.data, "上传成功");
    } else if (status === 'error') {
      this.message.error(`${file.name} 文件上传失败.`);
    }
  }

  /**重新组转字段，按照后端格式 */
  handleDisponseFile(fileList){
    const fileParams=[];
    fileList.forEach(it=>{
        // 如果是编辑时 回显有文件列表
      if(it?.fileKey){
        fileParams.push(it)
      }else{
        fileParams.push(it?.response?.data)
      }
    })
    return fileParams
  }
}

import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';

import { getServer } from 'src/app/request';
import E from "wangeditor"

@Component({
  selector: 'wang-Editor',
  template: `
    <div id="content"></div>
  `,
})
export class wangEditorComponent implements OnInit {

  public editor:any
  @Input() editorData;
  data=""
  constructor() { }

  ngOnInit() {
    this.editor = new E(document.getElementById('content'))
    this.editor.config.uploadFileName = 'file'; //设置文件上传的参数名称
    this.editor.config.uploadImgMaxLength = 5 // 一次最多上传 5 个图片
    // 配置 server 接口地址
    this.editor.config.uploadImgServer = `${getServer()}/member/file/upload`

    this.setEditorConfig()

    this.editor.create()
    this.editor.txt.html(this.editorData)
    this.editor.config.uploadImgHooks = {
      // 图片上传并返回了结果，想要自己把图片插入到编辑器中
      // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
      customInsert: function (insertImgFn, result) {
        // result 即服务端返回的接口
        // console.log('customInsert', result)

        // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
        insertImgFn(getServer() + '/member/file/downloadImg?fileKey=' + result.data.fileKey)
      }
    }




  }
  // 设置富文本编辑器
  setEditorConfig() {
    // 菜单展示项配置
    this.editor.config.menus = this.getMenuConfig();

  }
   // 获取显示菜单项
   getMenuConfig(): string[] {
    return [
      'bold',  // 粗体
      'italic',  // 斜体
      'underline',  // 下划线
      'head',  // 标题
      'fontName',  // 字体
      'fontSize',  // 字号
      'strikeThrough',  // 删除线
      'foreColor',  // 文字颜色
      'backColor',  // 背景颜色
      'link',  // 插入链接
      'list',  // 列表
      'justify',  // 对齐方式
      'quote',  // 引用
      // 'table',  // 表格
      'image',  // 插入图片
      // 'video',  // 插入视频
      'code',  // 插入代码
      'undo',  // 撤销
      'redo'  // 重复
    ];
  }
  editorOut(){
    this.data=this.editor.txt.html()
  }

}