html - 如何在角度中使用 kolkov 编辑器添加图像

Question

我正在使用 Visual Studio 代码开发 Angular 项目，我想添加 kolkovEditor。在这里我安装了 kolkovEditor，并且在编辑器中一切正常，但我无法在 kolkovEditor 中添加图像。下面给出以下错误

错误图片：

此处错误图片说明

html代码：

<div class="parent">
</div>
<div class="header">
    <h3>Edit Home Page</h3>
</div>

<!-- <section> -->
    <div class="example-button-row">
        <button mat-raised-button color="primary" (click)="onFormSubmit()" class="right">Save</button>
        <!-- <a mat-raised-button href="https://www.google.com/" target="_blank">Link</a> -->
    </div>
    <form [formGroup]="editorForm" (ngSubmit)="onFormSubmit()">
        <angular-editor formControlName="editor" [(ngModel)]="htmlContent" [config]="editorConfig"></angular-editor>

        <!-- <angular-editor formControlName="editor" [config]="editorConfig" [placeholder]="'Enter text here...'" [(ngModel)]="htmlContent"></angular-editor> -->
        <!-- <button type="submit">Submit</button>  -->
      </form>     

打字稿代码：

import { Component, ElementRef, OnInit, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService, ActionBeginEventArgs } from '@syncfusion/ej2-angular-richtexteditor';
// import { RichTextEditor, Toolbar, Link, Image, Count, HtmlEditor, QuickToolbar, PasteCleanup, Table } from '@syncfusion/ej2-richtexteditor';
// import { EditorChangeContent, EditorChangeSelection } from 'ngx-quill';
import { AngularEditorConfig } from '@kolkov/angular-editor';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.component.html',
  styleUrls: ['./home-page.component.css'],
  providers: [ToolbarService, LinkService, ImageService, HtmlEditorService]
})

export class HomePageComponent implements OnInit {
  htmlContent:any;
   editorForm = new FormGroup({
    editor: new FormControl()
}); 
  public tools: object = {
    items: ['Undo', 'Redo', '|',
      'Bold', 'Italic', 'Underline', 'StrikeThrough', '|',
      'FontName', 'FontSize', 'FontColor', 'BackgroundColor', '|',
      'SubScript', 'SuperScript', '|',
      'LowerCase', 'UpperCase', '|',
      'Formats', 'Alignments', '|', 'OrderedList', 'UnorderedList', '|',
      'Indent', 'Outdent', '|', 'CreateLink',
      'Image', '|', 'ClearFormat', 'Print', 'SourceCode', '|', 'FullScreen']
  };
  public iframe: object = { enable: true };
  public height = 700;
  public EditorData: any;
  serial: any;
  public value: string = "<p>Hello</p>";

  // @ViewChild('valueTemplate', {static: true}) valueTemplate: ElementRef | undefined;
  // @ViewChild('valueTemplate', {static: true}) valueTemplate: ElementRef | undefined;
  // @ViewChild('valueTemplate', { read: TemplateRef })
  // valueTemplate!: TemplateRef<any>;
  // @ViewChild('valueTemplate') editObj: any;
  
  editorConfig:  AngularEditorConfig = {
    editable: true,
    spellcheck: true,
    height: '15rem',
    minHeight: '5rem',
    placeholder: 'Enter text here...',
    translate: 'no',
    defaultParagraphSeparator: 'p',
    defaultFontName: 'Arial',
    toolbarHiddenButtons: [
      ['bold']
      ],
    customClasses: [
      {
        name: "quote",
        class: "quote",
      },
      {
        name: 'redText',
        class: 'redText'
      },
      {
        name: "titleText",
        class: "titleText",
        tag: "h1",
      },
    ]
  };
     upload (file: File) {
       alert();
     }
     onFormSubmit(){
      console.log('editorForm:' + this.editorForm.get('editor')?.value);
     }   
  constructor(private vref: ViewContainerRef) {
    // this.valueTemplate=valueTemplate;
    //  console.log("template",this.valueTemplate.)
  }
  ngOnInit(): void {
    console.log('editorForm:' + this.editorForm.get('editor')?.value);
  }
}