How to add a custom button in ngx-quill editor in Angular 8

Question

I am using ngx-quill as an editor in my solution. Now I want to add a custom button to the toolbar, that will insert a text into the content area of the editor.

In the toolbar I want to show 'N' and that button will insert the text:'[Name]' into the content of the editor where the cursor is placed. How can I do that?

Sparid

i think you should look at github.com/KillerCodeMonkey/ngx-quill at "custom button" section – Speed

Thanks for you reply. I think those buttons are referring to the html Tag <h1> and <h2> and is using some kind of default action. What I want is to place a button that insert a test into the editor, so I need to place a custom button and make some action for that button. – Sparid

Hello , did you solve your issue ? because i could not find any ressource about it and i'm still blocked too :/ i hope you can provide us an information about it.. thank you a lot ! – Tabular

No unfortunate not :-| – Sparid

Answer 1

I found one way to do it using regular button on the template.

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

stackblitz

Letterhead