57 votes

Comment puis-je ajouter un nouveau format (<hr> étiquette) pour Quill.js?

Je souhaite ajouter un bouton qui permettrait d'ajouter un <hr> tag de la quill.js (bêta) de l'éditeur.

Ici 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'ai ajouter un <h1> fonctionnalités de balise à mon éditeur et il 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>');
  })

J'essaie maintenant de faire la même chose pour un <hr> balise, qui ne fonctionne pas du tout:

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

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

l' <hr> balise dans la première div#editor sera remplacé par un <p> balise. Et la fonctionnalité du bouton, j'ai ajouté doensn pas de travail pour <hr> tags, mais pour les autres balises, il fonctionne. Je sais que l' <hr> balise n'est pas mis en œuvre pour Quill.js, c'est aussi pourquoi je obtenir cette sortie de la console:

plume:barre d'outils en ignorant attachant, voire inexistante format rh sélectionner.ql-rh

Est-il possible de résoudre ce problème?

58voto

Suisse Points 1251

J'ai encore aucune idée de pourquoi la question a downvotes, mais voici la solution:

Importer les incorporer blot - important: ne pas "bloquer", pas "embed", "bloquer/embed"!

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

Définir une nouvelle classe qui étend la classe qui intègrent

        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éfinir 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 l' <hr> bouton

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

Enregistrer votre nouveau format

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

Instancier votre Éditeur de texte avec le bouton droit de sélecteurs dans votre code HTML

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

La partie HTML reste le même. L'ensemble de l' <rh> de la fonctionnalité peut être fait similaire à la balise<img> format.

Merci à vous, vous aide de la communauté.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X