Override quill editor link with angular 2

Question

I am using ngx-quill with the snow theme and i want to override Quill link behavior. I want to open a custom modal (primeng) when I click on the add link icon and re-open this modal when user select a link in the text content instead of open the quill tooltip.

I use onEditorCreated to catch editor:

<quill-editor id="quill-editor" #editor [(ngModel)]="selectedSiteWebPageLigneColonne.contenuTemp" [style]="{'height':'300px'}" [modules]="moduleSortieSportQuill" (onEditorCreated)="onEditorCreated($event)">

In the component :

onInitEditor(event) {
    const quill = event.editor;
    quill.options.bounds = "#quill-editor";
    const toolbar = quill.getModule('toolbar');
    toolbar.addHandler('link', (value) => {
        if (value) {
            let range = quill.getSelection();
            if (range == null || range.length == 0) return;
            let preview = quill.getText(range);
            if (/^\S+@\S+\.\S+$/.test(preview) && preview.indexOf('mailto:') !== 0) {
                preview = 'mailto:' + preview;
            }

            //let tooltip = quill.theme.tooltip;
            //tooltip.edit('link', preview);
            //HERE I CAN OPEN MY MODAL WITH SUCCESS INSTEAD OF USING QUILL TOOLTIP
        } else {
            quill.format('link', false);
        }
    });
}

But it become very difficul to me to avoid the tooltip to be opened when user click on a link into the quill editor.

I have tried many things like:

    editor.on(Emitter.events.SELECTION_CHANGE, (range, oldRange, source) => {
        return;
    });

    document.querySelector('a.ql-action').addEventListener('click', (event) => {
        event.preventDefault();
    });
    document.querySelector('a.ql-remove').addEventListener('click', (event) => {
        event.preventDefault();
    });

in order to stop the tooltip to be opened and try to open my custom modal but the tooltip always appears... :(

Any help will be really appreciate.

Are you looking for the handlers config option? quilljs.com/docs/modules/toolbar/#handlers — jhchen
No because handlers only permit me to override button in the toolbar, not the behavior when a link is clicked in the text content (with opening the tooltip) — toregua
Were you ever able to figure this out? I'm in the exact same situation. — samuraiseoul

Everett Glovier Everett Glovier · Accepted Answer · 2017-12-30T01:54:41

It's hacky, but you have to override the show function of the snow theme:

let that = this;
this.quill.theme.tooltip.show = function(){
  that.quill.formatText( this.linkRange.index, this.linkRange.length, 'link', 'URL HERE' );
}

Override quill editor link with angular 2

1 Answers