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

Question

我一直在使用以下钩子向我的编辑器添加一个“编辑 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';
}