如何在w尾丰富文本文件中添加自定义类 [英] How to add custom class in wagtail richtextfiled

问题描述

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

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

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

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

推荐答案

如配置白名单以允许您的< span> 元素-富文本字段故意不允许允许插入任意HTML.(有关更多详细信息，请参见 https://stackoverflow.com/a/38097833/1853523 .)

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.)

但是，我强烈建议使用 StreamField 这，而不是扩展RTF编辑器.Wagtail的整个目的是使页面的信息内容与其表示之间保持分隔.说将此文本居中"的按钮仅是表示形式-这是模板代码中所包含的详细信息，而不是您的文章内容中所包含的详细信息.相反，您应该问:此文本的目的是什么?它是整笔报价，推荐书还是广告?为 that 创建块类型，然后考虑如何在模板中设置其样式.这样，您将对演示文稿有更多的控制权.

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.

(进一步阅读:丰富的文本字段和速度更快的马)

这篇关于如何在w尾丰富文本文件中添加自定义类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！