Le gestionnaire de liens de Quill ne fonctionne pas

Question

J'essaie d'écrire un gestionnaire personnalisé pour la valeur d'entrée du lien. Dans le cas où l'utilisateur entre un lien qui n'a pas de protocole personnalisé, je souhaite ajouter une valeur de http: avant la valeur d'entrée. En effet, si la valeur du lien ne contient pas http :, le lien n'est pas interprété et about:blank est affichée à l'intérieur. ( https://github.com/quilljs/quill/issues/1268#issuecomment-272959998 )

Voici ce que j'ai écrit (similaire à l'exemple officiel) aquí ) :

toolbar.addHandler("link", function sanitizeLinkInput(linkValueInput) {
    console.log(linkValueInput); // debugging

    if (linkValueInput === "")
        this.quill.format(false);

    // do nothing, since it implies user has just clicked the icon
    // for link, hasn't entered url yet
    else if (linkValueInput == true);

    // do nothing, since this implies user's already using a custom protocol
    else if (/^\w+:/.test(linkValueInput));

    else if (!/^https?:/.test(linkValueInput)) {
        linkValueInput = "http:" + linkValueInput;
        this.quill.format("link", linkValueInput);
    }
});

Chaque fois que l'utilisateur clique sur l'icône du lien, rien ne se passe et true est enregistré dans la console. Je souhaitais en fait que ce gestionnaire soit exécuté lorsque la personne clique sur "save" dans l'infobulle qui s'affiche après avoir appuyé sur l'icône du lien.

Une idée sur la manière de procéder ? Des conseils ou des suggestions sont également appréciés.

Merci de votre attention !

Answer 1

Le gestionnaire de la barre d'outils appelle simplement la fonction donnée lorsque le bouton de la barre d'outils est cliqué. Le gestionnaire de la value transmis dépend du statut de ce format dans la sélection de l'utilisateur. Ainsi, si l'utilisateur a mis en évidence un texte simple et a cliqué sur le bouton de lien, vous obtiendrez false . Si l'utilisateur a mis en évidence le lien, vous obtiendrez la valeur du lien, qui est par défaut l'url. Ceci est expliqué avec un exemple ici : http://quilljs.com/docs/modules/toolbar/#handlers .

Le thème snow utilise la fonction addHandler de la barre d'outils pour afficher une infobulle et il semble que vous essayez de vous connecter à cette fonction, ce qui n'est pas possible pour l'instant.

Il semble que ce que vous essayez vraiment de faire, c'est de contrôler la logique d'assainissement d'un lien. L'assainissement existe à un niveau inférieur dans Quill puisqu'il y a de nombreuses façons d'insérer un lien, par exemple à partir de l'interface d'infobulle, du collage, des différentes API, etc. Pour les couvrir toutes, la logique se trouve dans le format du lien lui-même. Un exemple de format de lien personnalisé est présenté dans le document suivant http://quilljs.com/guides/cloning-medium-with-parchment/#links . Vous pouvez également modifier la méthode d'assainissement propre à Quill, mais cela n'est pas recommandé car elle n'est pas documentée ni couverte par semver.

let Link = Quill.import('formats/link');
Link.sanitize = function(value) {
  return 'customsanitizedvalue';
}

Answer 2

Pour autant que je sache, la gestion de la création et de la mise à jour des liens est un peu répartie dans les sources de Quill. Le thème Snow par défaut gère l'édition des liens dans une certaine mesure : il suit la sélection de l'utilisateur et le dernier lien sélectionné en interne. Pour cette raison, je ne pense pas qu'il soit possible de réaliser ce que vous voulez actuellement dans Quill en utilisant uniquement un gestionnaire personnalisé.

Vous pouvez ouvrir un dossier pour signaler ce problème, les auteurs pourraient être disposés à ajouter un tel gestionnaire.

En attendant, j'ai trouvé un moyen de mettre à jour le lien en écoutant simplement les événements qui provoquent la fermeture de l'infobulle d'édition. Il y a quelques complications, parce qu'un lien peut être édité et le thème se fie alors à son suivi interne pour le mettre à jour. Cependant, dans l'ensemble, je pense que cette solution n'est pas trop mauvaise. Vous voudrez peut-être ajouter un contrôle d'erreur ici et là, mais dans l'ensemble elle semble fonctionner correctement et faire ce que vous voulez qu'elle fasse. J'ai créé un fichier Violon démontrant ceci. Par souci d'exhaustivité, je l'ai également inclus ici sous la forme d'un extrait de code.

var quill = new Quill('#editor', {
    modules: {
      toolbar: true
    },
    theme: 'snow'
  }),
  editor = document.getElementById('editor'),
  lastLinkRange = null;

/**
 * Add protocol to link if it is missing. Considers the current selection in Quill.
 */
function updateLink() {
  var selection = quill.getSelection(),
    selectionChanged = false;
  if (selection === null) {
    var tooltip = quill.theme.tooltip;
    if (tooltip.hasOwnProperty('linkRange')) {
      // user started to edit a link
      lastLinkRange = tooltip.linkRange;
      return;
    } else {
      // user finished editing a link
      var format = quill.getFormat(lastLinkRange),
        link = format.link;
      quill.setSelection(lastLinkRange.index, lastLinkRange.length, 'silent');
      selectionChanged = true;
    }
  } else {
    var format = quill.getFormat();
    if (!format.hasOwnProperty('link')) {
      return; // not a link after all
    }
    var link = format.link;
  }
  // add protocol if not there yet
  if (!/^https?:/.test(link)) {
    link = 'http:' + link;
    quill.format('link', link);
    // reset selection if we changed it
    if (selectionChanged) {
      if (selection === null) {
        quill.setSelection(selection, 0, 'silent');
      } else {
        quill.setSelection(selection.index, selection.length, 'silent');
      }
    }
  }
}

// listen for clicking 'save' button
editor.addEventListener('click', function(event) {
  // only respond to clicks on link save action
  if (event.target === editor.querySelector('.ql-tooltip[data-mode="link"] .ql-action')) {
    updateLink();
  }
});

// listen for 'enter' button to save URL
editor.addEventListener('keydown', function(event) {
  // only respond to clicks on link save action
  var key = (event.which || event.keyCode);
  if (key === 13 && event.target === editor.querySelector('.ql-tooltip[data-mode="link"] input')) {
    updateLink();
  }
});

<link href="https://cdn.quilljs.com/1.1.10/quill.snow.css" rel="stylesheet" />
<script src="https://cdn.quilljs.com/1.1.10/quill.min.js"></script>
<div id="editor"></div>

N'hésitez pas à me contacter si vous avez des questions.