Ngx-quill: Use quill function to insert text

[shashank-sharma]

I am working of Angular project and I am trying to insert text from typescript file. I am creating one customize button and then trying to insert some special character when that button is pressed. Now I am confused as if how to insert text just by click event. For example this Quill.insertText(0, 'Hello', 'bold', true); But obviously this code is wrong.

So how to do it ?

[KillerCodeMonkey]

you connect the change detection and databinding of angular 2+ with the [ngModel] property at the quill-editor-component.

In general you store html in your database to keep the content and print out the content somewhere else.

So, checkout this:

@Component({
  template: `<quill-editor [ngModel]="content"></quill-editor>`
})
class MyComponent {
  content =  `<b>Hello World</b>`
}

you simply need to change content variable and it will automatically passed to the editor.
But you can also use the quill stuff if you want:

@Component({
  template: `<quill-editor [ngModel]="content" (onEditorCreated)="created($event)"></quill-editor>`
})
class MyComponent {
  content =  `<b>Hello World</b>`;

  created(editorInstance) {
   editorInstance.insertText(....);
  }
}

[shashank-sharma]

Hi, Thanks for the answer, now I am getting how to implement this. One more thing that is if I want to implement change in text editor with some button in toolbar like creating one customize button. So how can we do that ?

import { Component } from '@angular/core';
import { QuillEditorComponent } from 'ngx-quill/src/quill-editor.component';

@Component({
  selector: 'app-root',
  template: `
<h3>Default editor</h3>
<h3>Custom Toolbar with toolbar</h3>
<quill-editor [ngModel]="content" [modules] = "{toolbar: ['omega']}"></quill-editor>
  `,
  styles: [`
    quill-editor {
      display: block;
    }
    /* We do not set Aref Ruqaa since it is the default font */
    .ql-omega:after {
      content: "Ω";
}
  `],
})
export class AppComponent {

    content = '<b>Hey</b>'
  created(editorInstance) {
        editorInstance.insertText(0, 'Hello', 'bold', true);
    }
}

I tried implementing handlers but I failed to do so.
I even came across with this codepen from one of the issues:
https://codepen.io/alexkrolick/pen/gmroPj?editors=0010
But I am not sure how to implement in angular.

[KillerCodeMonkey]

Checkout the last code block how to config ngx-quill. you can add custom buttons there or register own modules.
https://github.com/KillerCodeMonkey/ngx-quill#config

Did you know my example repo?
https://github.com/killerCodeMonkey/ngx-quill-example

There you can get some code examples like custom toolbar with custom models and buttons
https://killercodemonkey.github.io/ngx-quill-example/

so you will need to build your own toolbar

[shashank-sharma]

Yes, I have gone through each files inside ngx-quill-example and I understand most of the things. Right now what I have created is this customize toolbar with one omega button. I have also added click event to make sure that as soon as that omega button is clicked then I must add that value inside text editor. Now using this is giving error "created($event)". I just want to add that special character inside that text that's why I raised this issue as if how I can do it. Sorry if it is dumb question but I am stuck here for days.

import { Component } from '@angular/core';
import { QuillEditorComponent } from 'ngx-quill/src/quill-editor.component';

@Component({
  selector: 'app-root',
  template: `
<h3>Default editor</h3>
<h3>Custom Toolbar with toolbar</h3>
<quill-editor [ngModel]="content" [modules] = "{}">
  <div quill-editor-toolbar>
    <span class="ql-formats">
      <select class="ql-font">
        <option value="aref">Aref Ruqaa</option>
        <option value="mirza">Mirza</option>
        <option selected>Roboto</option>
      </select>
      <select class="ql-align" [title]="'Aligment'">
        <option selected></option>
        <option value="center"></option>
        <option value="right"></option>
        <option value="justify"></option>
      </select>
      <select class="ql-align" [title]="'Aligment2'">
        <option selected></option>
        <option value="center"></option>
        <option value="right"></option>
        <option value="justify"></option>
      </select>
      <button class = "ql-omega" (click) = "getOmega($event)"></button>
    </span>
    <span class="ql-formats">
      <div id="counter"></div>
    </span>
  </div>
  </quill-editor>
  `,
  styles: [`
    quill-editor {
      display: block;
    }
    /* We do not set Aref Ruqaa since it is the default font */
    .ql-omega:after {
      content: "Ω";
}
  `],
})
export class AppComponent {

    content = '<b>Hey</b>'
    getOmega(editorInstance)
    {
        editorInstance.insertText(0, 'Ω', 'bold', true);
    }
}

[KillerCodeMonkey]

Yeah, but the editorInstance is only passed through the onEditorCreated Output! you need to grab it first.

@Component({
  template: `<quill-editor [ngModel]="content" (onEditorCreated)="created($event)"><div quill-editor-toolbar>
    <span class="ql-formats">
      <select class="ql-font">
        <option value="aref">Aref Ruqaa</option>
        <option value="mirza">Mirza</option>
        <option selected>Roboto</option>
      </select>
      <select class="ql-align" [title]="'Aligment'">
        <option selected></option>
        <option value="center"></option>
        <option value="right"></option>
        <option value="justify"></option>
      </select>
      <select class="ql-align" [title]="'Aligment2'">
        <option selected></option>
        <option value="center"></option>
        <option value="right"></option>
        <option value="justify"></option>
      </select>
      <button class = "ql-omega" (click) = "getOmega()"></button>
    </span>
    <span class="ql-formats">
      <div id="counter"></div>
    </span>
  </div></quill-editor>`
})
class MyComponent {
  content =  `<b>Hello World</b>`;
  editorInstance;

  created(editorInstance) {
   this.editorInstance = editorInstance;
  }

  getOmega() {
    this.editorInstance.insertText(0, 'Ω', 'bold', true);
  }
}

[shashank-sharma]

Wow, cool. Thank you for clarifying this issue. ^_^