Remplacer le lien de l'éditeur de quill avec angulaire 2

J'utilise ngx-quill avec le thème de la neige et je souhaite remplacer le comportement du lien Quill. Je souhaite ouvrir un modal personnalisé (primeng) lorsque je clique sur l'icône d'ajout de lien et que j'ouvre à nouveau ce modal lorsque l'utilisateur sélectionne un lien dans le contenu du texte au lieu d'ouvrir l'info-bulle.Remplacer le lien de l'éditeur de quill avec angulaire 2

J'utilise onEditorCreated pour attraper éditeur:

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

Dans le composant:

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 (/^\[email protected]\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); 
     } 
    }); 
}

Mais il devient très difficul pour moi d'éviter l'info-bulle à ouvrir lorsque l'utilisateur clique sur un lien dans l'éditeur de plume.

J'ai essayé beaucoup de choses comme:

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

afin d'arrêter l'info-bulle pour ouvrir et essayer d'ouvrir mon modales personnalisé, mais l'info-bulle apparaît toujours ... :(

Toute aide . sera vraiment apprécier

Source

2017-08-21 toregua

Cherchez-vous l'option de configuration des gestionnaires? https://quilljs.com/docs/modules/toolbar/#handlers – jhchen

Non parce que les gestionnaires me permettent seulement de remplacer le bouton de la barre d'outils, pas le comportement quand un lien est cliqué dans le contenu du texte (avec l'ouverture de l'info-bulle) – toregua

vous avez jamais pu comprendre cela? Je suis exactement dans la même situation. – samuraiseoul

Il est hacky, mais vous devez remplacer la fonction d'exposition du thème de la neige:

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

Source

2017-12-30 01:54:41

Remplacer le lien de l'éditeur de quill avec angulaire 2

Répondre

Questions connexes