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件

この派手な配置のツールバーは、バグがないように複雑にする方法であるように思われ、1つの位置の問題を修正するたびに、他のコンテキストで他の位置の問題が発生するようです。

ツールバーが配置されず、代わりにテキスト領域のすぐ上に静的に挿入されるようにツールバーを変更することは可能でしょうか? (または、ツールバーを1つではなく複数持つとスクリプトが中断する場合は、ツールバーが常にテキスト領域の外側になるように、各リッチテキストテキスト領域の上に十分なスペースを確保してください)

同じ問題があり、ハッキーな回避策を使用して解決しました。 ここで追加した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 評価