Wagtail: 你好,MultiFieldPanel 中 StreamField 中的工具栏错位

创建于 2017-05-09  ·  3评论  ·  资料来源: wagtail/wagtail

问题摘要

在 MultiFieldPanel 内使用 RichTextBlock 时,工具栏会与文本编辑器中的内容重叠。

解决方法是将 RichTextBlock 包装在 StructBlock 中 - 根据 #3415 中修复的 #1511 - 或不使用 MultiFieldPanel。

重现步骤

设置模型如下:

body_de = StreamField([('paragraph', RichTextBlock())])
content_panels = [
        MultiFieldPanel([
            StreamFieldPanel('body')
        ])
]

观察工具栏重叠如下:

screenshot from 2017-05-09 12-29-33

技术细节

  • Python版本:3.5.3
  • Django 版本:1.11
  • 燕尾版本:1.10
  • 浏览器版本:在当前稳定版本的 IE、Firefox、Chrome 中测试
Rich text Won't Fix Bug

所有3条评论

在我看来,这个花哨的定位工具栏是一种复杂的方式,没有错误,并且对一个位置问题的每次修复似乎都会导致其他上下文中的其他位置问题。

是否可以修改工具栏,使其不定位,而是静态插入文本区域上方? (或者,如果有多个工具栏而不是一个定位一个会破坏脚本,只需在每个富文本文本区域上方保留足够的空间,以便工具栏始终位于文本区域之外)

遇到了同样的问题并使用 hacky 解决方法解决了它。 如果我们在其他边缘情况下集成我在此处添加的 css 规则,我确信工具栏会出现一些问题。

我不是建议您应该使用以下内容,但它解决了问题(我承认使用不可维护的方式)。
也许我们可以基于它构建一个合适的解决方案:

some_app/wagtail_hooks.py

from django.contrib.staticfiles.templatetags.staticfiles import static
from django.utils.html import format_html

from wagtail.wagtailcore import hooks

@hooks.register('insert_editor_css')
def editor_css():
    return format_html(
        '<style>{}</style>',
        'body div.hallotoolbar:not(.stream-field) {min-width: 850px !important;transform: translate3d(-60px, -75px, 0px) !important;}'
    )

我们用一个新的编辑器替换了 Hallo,它没有花哨的工具栏定位,所以没有这个问题。 关闭。

此页面是否有帮助?
0 / 5 - 0 等级