wagtail richtextfiledでカスタムクラスを追加する方法

Question

hallo.jsエディタでクラスを追加するボタンを追加するにはどうすればいいですか？

ここに私のコードがありますが、それは動作しません、それはwagtaiのfuctionを編集するインターフェイスです。 最後に、選択または現在のタグにクラスを追加する必要があります。 Mb私は何とかhtmlでそれを見ることができ、手動でクラスを追加できますか？ Wagtail customisation docsで述べたように

(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

、あなたはregisterHalloPluginを呼び出す必要があります。 <span>要素の豊富なテキストフィールドを意図的に使用できるようにするには、configure the whitelistも必要ですは任意のHTMLを挿入できません。 （詳細はhttps://stackoverflow.com/a/38097833/1853523を参照してください）

ただし、リッチテキストエディタを拡張するのではなく、StreamFieldを使用することを強く推奨します。 Wagtailの全目的は、ページの情報内容とそのプレゼンテーションを分離することです。 「このテキストを中心にする」と言うボタンは、プレゼンテーションだけです。これは、テンプレートコードに属する詳細であり、記事の内容には含まれません。代わりに、質問する必要があります：目的はこのテキストのですか？それはブロック引用、証言、宣伝ですか？ のブロックタイプをに作成し、テンプレートでスタイルを設定する方法について考えてみましょう。そのようにプレゼンテーションをはるかにコントロールできます。

（さらに読み：Rich text fields and faster horses）