how to add the image using the kolkov editor in angular

I'm using visual studio code to develop angular project and I want to add kolkovEditor.here I am installed the kolkovEditor and everything is working fine in editor but I can not add image in the kolkovEditor.the following errors given below

Error Image:

Error image description here

html code:

<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>


typescript code:


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);
}
}

Continue reading...