1

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);
4

1 回答 1

3

正如Wagtail 定制文档中所述，您需要调用registerHalloPlugin. 您还需要配置白名单以允许您的<span>元素 - 富文本字段故意不允许插入任意 HTML。（有关更多详细信息，请参阅https://stackoverflow.com/a/38097833/1853523。）

但是，我强烈建议为此使用StreamField，而不是扩展富文本编辑器。Wagtail 的整个目的是在页面的信息内容和它的呈现之间保持分离。一个按钮说“居中这个文本”纯粹是展示 - 这是属于模板代码的细节，而不是你的文章内容。相反，你应该问：这段文字的目的是什么？它是块引用，推荐，广告吗？为此创建块类型，然后考虑如何在模板中设置它们的样式。通过这种方式，您将对演示文稿有更多的控制权。

（进一步阅读：富文本字段和更快的马）

于 2017-07-31T10:18:10.450 回答