使用编辑源按钮在 Django Wagtail 中扩展 Hallojs答案

【问题标题】：Extending Hallojs in Django Wagtail With Edit Source Button使用编辑源按钮在 Django Wagtail 中扩展 Hallojs
【发布时间】：2016-11-10 01:33:31
【问题描述】：

我一直在使用以下钩子向我的编辑器添加一个“编辑 Html”源按钮：

@hooks.register('insert_editor_js')
def enable_source():
    return format_html(
        """
        <script>
            registerHalloPlugin('hallohtml');
        </script>
        """
    )

它添加了一个按钮，但我不知道如何添加图标 - 请参见下面没有图标的屏幕截图。

除了没有图标的所有按钮都使源代码编辑器工作得很好。感谢您的帮助。

【问题讨论】：

如果您发现自己需要在原始 HTML 级别编辑富文本字段，几乎可以肯定，您应该在数据模型中做得更好 - 富文本字段仅用于简单的文本格式。如果您正在尝试进行布局/字体等，那是模板设计师的工作；如果您尝试嵌入表格/图表等，请查看 StreamField (torchbox.com/blog/rich-text-fields-and-faster-horses, docs.wagtail.io/en/v1.5.2/topics/streamfield.html)。
谢谢.. 我已经在使用 Streamfield，但忽略了它没有添加任何预定义的样式，因此将我的自定义内容很好地放置在页面上。如果您将评论作为答案，我会接受。再次感谢 - 爱鹡鸰！！
使用插件 Studio Rooster 将能够插入不间断的空格、下标和上标、具有目标属性的锚点（如果他将'a': attribute_rule({'href': check_url, 'target': True}) 添加到whitelist_element_rules）、短划线等。这些都不是布局、模板、表格或图表的问题。

标签： django django-models django-templates wagtail wagtail-snippet

【解决方案1】：

使用 insert_editor_css 挂钩向编辑器提供额外的 CSS 文件。

@hooks.register('insert_editor_css')
def editor_css():
    return format_html(
        '<link rel="stylesheet" href="{}">',
        static('demo/css/editor-overrides.css')
    )

在您的 hallohtml 插件 JS 中，将 icon-hallohtml 分配给按钮并使用以下 CSS 为其设置 H 字符样式：

.hallotoolbar .halloformat .ui-button-text .icon-hallohtml:before {
    content:'H';
}

【讨论】：