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

Question

我一直在使用以下钩子向我的编辑器添加一个 'Edit Html' 源代码按钮：

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

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

除无图标外，所有按钮都使源代码编辑器运行良好。感谢您的帮助。

Answer 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';
}

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

Extending Hallojs in Django Wagtail With Edit Source Button

django

django-models

django-templates

wagtail

wagtail-snippet