0

我正在使用 Visual Studio 代码来开发 Angular 项目。我需要在我的网站页面中添加编辑器，我已经在页面中成功实现了丰富的文本编辑器，但是在选择图像文件之后，编辑器框中无法添加图像文件。

添加图像的对话框：

图片说明在这里

html代码：

  <div id='editor'>
    <ejs-richtexteditor id='defaultRTE' [(value)]='value'>
    </ejs-richtexteditor>
</div>

打字稿代码：

import { Component, ElementRef, OnInit, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService, ActionBeginEventArgs } from '@syncfusion/ej2-angular-richtexteditor';
@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 {
 
  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>";
  constructor(private vref: ViewContainerRef) {
  
  }  
  ngOnInit(): void {
    console.log("editorData", this.value)
  }
}

所有细节都在上面的代码和文件图像中给出。

4

0 回答 0