Access Quill API when using the editor

[gatapia]

It would be great if we could access the Quill api when using the Editor. This would allow adding custom commands to the quill toolbar (and other good things).

Perhaps a simple (oninit) event listener that gets the Quill instance?

[cagataycivici]

I see but you can already customize toolbar;

<p-editor [(ngModel)]="text2" [style]="{'height':'320px'}">
        <header>
            <span class="ql-formats">
                <button class="ql-bold"></button>
                <button class="ql-italic"></button>
                <button class="ql-underline"></button>
            </span>
        </header>
    </p-editor>

[gatapia]

It is very hard to customise the toolbar with the version of Quill being used. For instance; it is very hard to add the bullets (ql-list) button. As it uses SVG to render itself making for a very ugly template.

So if I wanted to keep the current toolbar + a save button the template would be huge. So I figured API access would be easier.

[krojew]

Having access to the editor would be a nice addition. I would like to call its API, but now it's impossible.

[vg33]

It is possible to get a reference to the Editor component using @ViewChild and then access the quill property. For example:

private quill:any;

@ViewChild(Editor) editorComponent: Editor;

ngAfterViewInit() {
   this.quill = editorComponent.quill;
}

[cagataycivici]

Added onInit that passes the quill instance and also getQuill method.

[JairDiaz23]

Has someone try to add the formula format when creating the editor with a custom toolbar?

[Klinton90]

@gatapia could you please give an example how do you register e.g. custom formats? Issue for me is that editor is already created at moment when onInit is called, so I calls to Quill.register() are ignored at this point... Is there any other way to update Quill context after it is created? As far as I can see, formats are stored on internal pearchment object, which we do not have access to...