如何在最新版Wagtail中实现图片环绕文字效果

1. 重写RichText图片渲染模板 #

Wagtail默认会把RichText里的图片渲染成独立标签，和段落分开。直接重写图片渲染模板，给图片添加浮动样式类，就能让文本自动环绕：

• 在项目模板目录下新建wagtailcore/rich_text/image.html文件，内容如下：

{% load wagtailimages_tags %}
{% image image original class="float-left" alt=alt %}

（需要图片居右的话，把float-left换成float-right）

• 在项目CSS文件中添加浮动样式：

.float-left {
    float: left;
    margin: 0 1rem 1rem 0;
    max-width: 300px;
}
.float-right {
    float: right;
    margin: 0 0 1rem 1rem;
    max-width: 300px;
}

即便图片和段落是分开的DOM结构，浮动样式也能让后续段落的文本环绕在图片周围。

2. 用StreamField实现灵活混排 #

如果需要图片嵌入到段落中间（而非段落之间），推荐用StreamField替代纯RichText字段，它支持混合文本和图片块，渲染时可自由控制布局：

• 在models.py里定义包含文本和图片块的StreamField：

from wagtail.fields import StreamField
from wagtail.blocks import RichTextBlock, ImageBlock

class YourPage(Page):
    body = StreamField([
        ('text', RichTextBlock()),
        ('image', ImageBlock()),
    ], use_json_field=True)

    content_panels = Page.content_panels + [
        FieldPanel('body'),
    ]

• 在页面模板中渲染时，给图片块套上浮动容器：

{% for block in page.body %}
    {% if block.block_type == 'image' %}
        <div class="float-left">
            {% image block.value original alt=block.value.alt %}
        </div>
    {% else %}
        {{ block }}
    {% endif %}
{% endfor %}

编辑页面时，交替添加文本块和图片块，渲染后图片会浮动在文本旁，实现自然环绕。

3. 自定义编辑器插入逻辑（进阶） #

如果必须在纯RichText编辑器里把图片插入到段落内部，需要修改编辑器的插件配置：

• 通过Wagtail的钩子扩展RichText编辑器，自定义图片插入的处理逻辑，让图片作为子元素插入到当前光标所在的段落中。
• 这种方法需要掌握前端编辑器（Draftail）的自定义开发，适合有前端经验的开发者。

内容的提问来源于stack exchange，提问作者Phillip