如何在 wagtail richtextfiled 中添加自定义 class

Question

如何在 hallo.js 编辑器中添加添加 class 的按钮？

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

(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, 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 中所述，了解更多详情。）

但是，我强烈建议为此使用 StreamField，而不是扩展富文本编辑器。 Wagtail 的全部目的是在页面的信息内容及其表示之间保持分离。表示 "center this text" 的按钮纯粹是演示 - 这是模板代码中的细节，而不是文章内容中的细节。相反，您应该问：这篇文章的目的是什么？它是块引用、推荐书还是广告？为 that 创建块类型，然后考虑如何在模板中设置它们的样式。这样您就可以更好地控制演示文稿。

（进一步阅读：Rich text fields and faster horses）

如何在 wagtail richtextfiled 中添加自定义 class

How to add custom class in wagtail richtextfiled

javascript

django

hallo-js

wagtail