如何在 wagtail Richtextfiled 中添加自定义类

Question

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

这是我的代码，但它不起作用，它只能在 wagtai;s 编辑界面注册功能。 最后，我需要将任何类添加到选择或当前标签。 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 的整个目的是在页面的信息内容和它的呈现之间保持分离。一个按钮说“居中这个文本”纯粹是展示 - 这是一个属于模板代码的细节，而不是你的文章内容。相反，你应该问：这段文字的目的是什么？它是块引用，推荐，广告吗？为 that 创建块类型，然后考虑如何在模板中设置它们的样式。通过这种方式，您可以更好地控制演示文稿。

（延伸阅读：Rich text fields and faster horses）