如何在 Angular 8 的 ngx-quill 编辑器中添加自定义按钮

Question

我在我的解决方案中使用 ngx-quill 作为编辑器。现在我想向工具栏添加一个自定义按钮，它将在编辑器的内容区域中插入文本。

在工具栏中，我想显示“N”，该按钮会将文本：“[Name]”插入到光标所在的编辑器内容中。我怎样才能做到这一点？

Answer 1

我找到了一种使用模板上的常规按钮来完成此操作的方法。

import { Component, VERSION, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'my-app',
  encapsulation: ViewEncapsulation.None,
  template: `
  <quill-editor customToolbarPosition="bottom" [(ngModel)]="editorModel">
  <div quill-editor-toolbar>
    <span class="ql-formats">
      <button
        type="button"
        style="border: 1px solid red; width: 50px;"
        (click)="handler()"
      >
        BTN
      </button>
    </span>
  </div>
</quill-editor>
<br/>
<div>
<label>text to insert into quill editor</label>
<br/>
<input type="text" [(ngModel)]="name"/>
</div>
  `,
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  editorModel = '';
  name;

  handler() {
    this.editorModel += this.name;
  }
}

堆栈闪电战