web-dev-qa-db-fra.com

Comment puis-je ajouter un nouveau format (balise <hr>) à Quill.js?

Je veux ajouter un bouton qui ajouterait un <hr> tag vers l'éditeur quill.js (beta) .

Voici le violon .

<!-- Initialize Quill editor -->
    <div id="toolbar-container">
        <span class="ql-formats">
          <button class="ql-hr"></button>  //here my hr-button
        </span>
        <span class="ql-formats">
          <button class="ql-bold"></button>
          <button class="ql-italic"></button>
        </span>
    </div>

    <div id="editor">

      <p>Hello World!</p>
      <hr> // this gets replaced by <p> tag automatically *strange*
      <p>Some initial <strong>bold</strong> text</p>
    </div>

J'initialise mon éditeur:

 var quill = new Quill('#editor', {
        modules: {
          toolbar: '#toolbar-container'
        },
        placeholder: 'Compose an epic...',
        theme: 'snow'
      });

Ici j'ajoute un <h1> fonctionnalité de balise à mon éditeur et cela fonctionne très bien:

  $('.ql-hr').on("click",function(){

      var range = quill.getSelection();      
      var text = quill.getText(range.index, range.length);
      quill.deleteText(range.index, range.length);
      quill.pasteHTML(range.index, '<h1>'+text+'</h1>');
  })

Maintenant j'essaye la même chose pour un <hr> tag, qui ne fonctionne pas du tout:

  $('.ql-hr').on("click",function(){

      var range = quill.getSelection();      
      quill.pasteHTML(range.index, '<hr>');
  })

les <hr> tag dans le div#editor est remplacé par un <p> tag. Et la fonctionnalité de bouton que j'ai ajoutée ne fonctionne pas pour <hr> tags, mais pour les autres tags, cela fonctionne. Je connais le <hr> tag n'est pas implémenté dans Quill.js, c'est aussi pourquoi j'obtiens cette sortie de console:

plume: barre d'outils ignorant l'attachement à un format inexistant hr select.ql-hr

Y a-t-il un moyen de réparer ceci?

javascripthtmlquill
37
Suisse

Je n'ai toujours aucune idée pourquoi la question a des votes négatifs, mais voici cependant la solution:

Importez l'intégration blot - important: pas "bloquer", pas "incorporer", "bloquer/intégrer"!

 var Embed = Quill.import('blots/block/embed');

Définissez une nouvelle classe qui étend cette incorporation

        class Hr extends Embed {
            static create(value) {
                let node = super.create(value);
                // give it some margin
                node.setAttribute('style', "height:0px; margin-top:10px; margin-bottom:10px;");
                return node;
            }
        }

Définissez votre tag

        Hr.blotName = 'hr'; //now you can use .ql-hr classname in your toolbar
        Hr.className = 'my-hr';
        Hr.tagName = 'hr';

Écrire un gestionnaire personnalisé pour le bouton <hr>

        var customHrHandler = function(){
            // get the position of the cursor
            var range = quill.getSelection();
            if (range) {
                // insert the <hr> where the cursor is
                quill.insertEmbed(range.index,"hr","null")
            }
        }

Enregistrez votre nouveau format

        Quill.register({
            'formats/hr': Hr
        });

Instanciez votre éditeur avec les bons sélecteurs dans votre HTML

       var quill = new Quill('#editor', {
          modules: {
            toolbar: { container: '#toolbar-container',
                handlers: {
                    'hr': customHrHandler
                }
            }
          },
          theme: 'snow'
        });

La partie HTML reste la même. L'ensemble de la fonctionnalité <hr> peut être effectuée de manière similaire au <img> format .

Merci, vous communauté utile.

45
Suisse

Pas assez de représentant pour commenter, donc poster comme réponse, pour résoudre un problème mineur.

La boîte d'invite par défaut causée par l'incorporation montrée dans la grande réponse de @ Suisse doit apparemment être gérée dans un gestionnaire de barre d'outils (avec un deuxième paramètre), comme ceci:

var toolbarOptions = {
  handlers: {
    // ...
    'hr': function(value) {
       this.quill.format('hr', true);
    }
  }
}

Discussion source -
Documentation: comment éviter l'invite par défaut lors de l'appel de blots d'intégration personnalisés via le module de barre d'outils

Exemple d'invite dans les documents du gestionnaire de barres d'outils: https://quilljs.com/docs/modules/toolbar/#handlers

1
pratu16x7