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

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

我尝试过很多东西：

    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

这很糟糕，但你必须覆盖雪主题的show功能：

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

用角度2覆盖quill编辑器链接

1 个答案: