How to add custom class in wagtail richtextfiled

Question

how can i add button which adds class in hallo.js editor?

Here is my code, but it dont works, it ony register fuction in wagtai;s edit interface. In the end I need to add any class to selection or current tag. Mb I can see it in html in someway and add classes manually?

(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

As mentioned in the Wagtail customisation docs, you need to call registerHalloPlugin. You'll also need to configure the whitelist to allow your <span> element - rich text fields intentionally don't allow inserting arbitrary HTML. (See https://stackoverflow.com/a/38097833/1853523 for more detail.)

However, I would strongly encourage using StreamField for this, rather than extending the rich text editor. The whole purpose of Wagtail is to keep a separation between the information content of pages, and its presentation. A button to say "center this text" is purely presentation - that's a detail that belongs in template code, not in your article content. Instead, you should ask: what is the purpose of this text? Is it a block-quote, a testimonial, an advert? Create block types for that, and then think about how to style them in the template. You'll have much more control over the presentation that way.

(further reading: Rich text fields and faster horses)