web-dev-qa-db-fra.com

Implémenter un éditeur personnalisé pour Quill blot

J'essaie de personnaliser l'éditeur de plumes pour mes besoins. J'ai réussi à implémenter et à insérer des transferts personnalisés, comme décrit dans https://quilljs.com/guides/cloning-medium-with-parchment/ Mais je dois modifier les données, qui sont attachées à mes transferts , comme l'URL d'un lien par exemple. L'implémentation par défaut de Quill affiche une petite zone d'édition "en ligne" pour les liens. Je veux mettre en œuvre quelque chose comme ça moi-même, mais je ne comprends pas. Je n'ai trouvé aucun indice dans les documents et guides. En lisant le code source de Quill, je n'ai pas pu déterminer où la boîte de dialogue d'édition des liens est implémentée. Tout point de départ serait très apprécié.

quill
10
Achim

J'ai essayé quelque chose de similaire. La façon appropriée de le faire devrait être de créer un module. Malheureusement, comme vous le savez déjà, ce n'est pas aussi simple qu'il y paraît.

Permettez-moi de vous indiquer quelques ressources utiles qui m'ont beaucoup aidé à comprendre comment créer des extensions pour Quill. Le mainteneur de Quills organise Awesome quill list.

Je recommande de regarder en particulier

  • quill-emoji il contient du code pour afficher les emoji d'info-bulles lors de l'écriture
  • quill-form peut-être qu'une extension de formulaire a du code qui vous dirigera dans la bonne direction

Voici mon essai avec un module de plume personnalisé.

const InlineBlot = Quill.import('blots/inline');

class NamedLinkBlot extends InlineBlot {
  static create(value) {
    const node = super.create(value);

    node.setAttribute('href', value);
    node.setAttribute('target', '_blank');
    return node;
  }
}
NamedLinkBlot.blotName = 'namedlink';
NamedLinkBlot.tagName = 'A';

Quill.register('formats/namedlink', NamedLinkBlot);

const Tooltip = Quill.import('ui/tooltip');


class NamedLinkTooltip extends Tooltip {
  show() {
    super.show();
    this.root.classList.add('ql-editing');
  }


}

NamedLinkTooltip.TEMPLATE = [
  '<a class="ql-preview" target="_blank" href="about:blank"></a>',
  '<input type="text" data-link="https://quilljs.com">',
  'Url displayed',
  '<input type="text" data-name="Link name">',
  '<a class="ql-action"></a>',
  '<a class="ql-remove"></a>',
].join('');


const QuillModule = Quill.import('core/module');

class NamedLinkModule extends QuillModule {
  constructor(quill, options) {
    super(quill, options);
    this.tooltip = new NamedLinkTooltip(this.quill, options.bounds);
    this.quill.getModule('toolbar').addHandler('namedlink', this.namedLinkHandler.bind(this));
  }

  namedLinkHandler(value) {
    if (value) {
      var range = this.quill.getSelection();
      if (range == null || range.length === 0) return;
      var preview = this.quill.getText(range);
      this.tooltip.show();
    }
  }
}

Quill.register('modules/namedlink', NamedLinkModule);

const quill = new Quill('#editor', {
    theme: 'snow',
    modules: {
      namedlink: {},
      toolbar: {
        container: [
          'bold',
          'link',
          'namedlink'
        ]
      }
    }
  });

Démo CodePen

Pour voir l'info-bulle:

  1. Sélectionnez n'importe quel mot
  2. Cliquez sur le bouton invisible à droite du bouton de lien, votre curseur se transformera en main.

Principaux problèmes à résoudre:

  • afin de personnaliser l'info-bulle, vous devrez copier la majorité du code de SnowTooltip Le principal problème est que vous ne pouvez pas facilement étendre cette info-bulle.
  • vous devez également adapter le code des auditeurs d'événements, mais il doit être simple
1
Kamil Niski

Voici une réponse partielle. Veuillez consulter les lignes 41 à 64 dans le fichier " https://github.com/quilljs/quill/blob/develop/themes/snow.js "

Je n'ai pas essayé d'implémenter quelque chose de similaire, mais il semble que Quill regarde un événement "sélection-changement" et vérifie si la sélection est sur un LinkBlot avec un lien défini.

La classe SnowTooltip inclut des références aux sélecteurs, 'a.ql-preview', 'ql-edit', 'a.ql-action' et 'a.ql-remove', que nous trouvons dans l'info-bulle d'édition de lien.

this.quill.on(
  Emitter.events.SELECTION_CHANGE,
  (range, oldRange, source) => {
    if (range == null) return;
    if (range.length === 0 && source === Emitter.sources.USER) {
      const [link, offset] = this.quill.scroll.descendant(
        LinkBlot,
        range.index,
      );
      if (link != null) {
        this.linkRange = new Range(range.index - offset, link.length());
        const preview = LinkBlot.formats(link.domNode);
        this.preview.textContent = preview;
        this.preview.setAttribute('href', preview);
        this.show();
        this.position(this.quill.getBounds(this.linkRange));
        return;
      }
    } else {
      delete this.linkRange;
    }
    this.hide();
  },
);
1
גלעד ברקן