angular - 用 Angular 2 覆盖羽毛笔编辑器链接

Question

我正在使用 ngx-quill使用雪主题，我想覆盖 Quill 链接行为。我想在单击添加链接图标时打开自定义模式 (primeng)，并在用户选择文本内容中的链接而不是打开羽毛笔工具提示时重新打开此模式。

我使用 onEditorCreated 来捕获编辑器:

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

在组件中:

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

但是当用户点击进入 quill 编辑器的链接时，要避免打开工具提示对我来说变得非常困难。

我试过很多东西，比如:

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

为了停止打开工具提示并尝试打开我的自定义模式，但工具提示总是出现... :(

任何帮助将不胜感激。

Answer 1

这很 hacky，但你必须覆盖 snow 主题的 show 函数:

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