Comment ajouter une classe personnalisée dans wagtail richtextfiled

Question

comment puis-je ajouter un bouton qui ajoute la classe dans l'éditeur hallo.js?

Voici mon code, mais il ne fonctionne pas, il fonce dans l'interface d'édition de wagtai. En fin de compte, je dois ajouter n'importe quelle classe à la sélection ou à la balise actuelle. Mb Je peux le voir en html en quelque sorte et ajouter des classes manuellement?

(function() { 
    (function(jQuery) { 
     return jQuery.widget('IKS.center', { 
      options: { 
       editable: null, 
       toolbar: null, 
       uuid: '', 
       buttonCssClass: 'center' 
      }, 
      populateToolbar: function(toolbar) { 
       var buttonElement, buttonset; 

       buttonset = jQuery('<span class="' + this.widgetName + '"></span>'); 
       buttonElement = jQuery('<span></span>'); 
       buttonElement.hallobutton({ 
        uuid: this.options.uuid, 
        editable: this.options.editable, 
        label: 'Center element', 
        command: 'addClass("center")', 
        icon: 'icon-horizontalrule', 
        cssClass: this.options.buttonCssClass 
       }); 
       buttonset.append(buttonElement); 


       buttonset.hallobuttonset(); 
       return toolbar.append(buttonset); 
      } 
     }); 
    })(jQuery); 

}).call(this); 

Answer 1

Comme mentionné dans le Wagtail customisation docs, vous devez appeler registerHalloPlugin. Vous aurez également besoin de configure the whitelist pour autoriser votre <span> éléments - champs de texte riche intentionnellement ne pas permettent d'insérer du code HTML arbitraire. (Voir https://stackoverflow.com/a/38097833/1853523 pour plus de détails.)

Cependant, je vous encourage fortement à utiliser StreamField pour cela, plutôt que d'étendre l'éditeur de texte enrichi. Tout le but de Wagtail est de garder une séparation entre le contenu de l'information des pages, et sa présentation. Un bouton pour dire «centre ce texte» est purement une présentation - c'est un détail qui appartient au code du modèle, pas au contenu de votre article. Au lieu de cela, vous devriez demander: quel est le but de ce texte? Est-ce une citation-bloc, un témoignage, une publicité? Créez des types de bloc pour que, puis réfléchissez à la façon de les styler dans le modèle. Vous aurez beaucoup plus de contrôle sur la présentation de cette façon.

(en savoir plus: Rich text fields and faster horses)