javascript - 如何在 wagtail richtextfiled 中添加自定义类

Question

如何添加在 Hallo.js 编辑器中添加类的按钮？

这是我的代码，但它不起作用，它只能在 wagtai 的编辑界面中注册功能。最后，我需要将任何类添加到选择或当前标签中。Mb我可以以某种方式在html中看到它并手动添加类？

(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

如 Wagtail customisation docs 中所述，您需要调用registerHalloPlugin 。您还需要configure the whitelist让您的<span>元素 - 富文本字段故意不允许允许插入任意 HTML。 (有关更多详细信息，请参阅 https://stackoverflow.com/a/38097833/1853523。)

但是，我强烈鼓励使用 StreamField为此，而不是扩展富文本编辑器。 Wagtail 的全部目的是保持页面信息内容与其表示形式的分离。 “将此文本居中”的按钮纯粹是演示 - 这是属于模板代码而不是文章内容的细节。相反，您应该问:这段文字的目的是什么？它是一段引用、一段感言、还是一则广告？为那个创建 block 类型，然后考虑如何在模板中设置它们的样式。这样您就可以更好地控制演示文稿。

(进一步阅读:Rich text fields and faster horses)