Wagtail 4.1后台管理字段设为只读的实现方案咨询

针对Wagtail后台由JS驱动的定制字段（如RichTextField、日期选择器等），原生Django的readonly属性确实无法生效，需要结合前端JS禁用交互+后端表单校验的方式来实现只读效果，具体方案如下：

1. 前端自定义JS禁用字段交互 #

Wagtail的定制字段会替换原生input元素，需要针对不同字段类型的DOM结构编写逻辑：

步骤1：创建只读字段处理JS文件 #

在项目的static/js/目录下新建admin_readonly_fields.js：

document.addEventListener('DOMContentLoaded', function() {
    // 批量处理带make-readonly类的字段
    document.querySelectorAll('.make-readonly').forEach(field => {
        // 普通输入框/文本域
        if (['INPUT', 'TEXTAREA'].includes(field.tagName)) {
            field.readOnly = true;
            field.classList.add('bg-gray-100');
        }
        // Draftail富文本编辑器
        const draftailWrapper = field.closest('.DraftailEditor');
        if (draftailWrapper) {
            draftailWrapper.setAttribute('contenteditable', false);
            draftailWrapper.style.backgroundColor = '#f3f4f6';
            // 隐藏工具栏
            const toolbar = draftailWrapper.querySelector('.Draftail-Toolbar');
            if (toolbar) toolbar.style.display = 'none';
        }
        // Wagtail日期选择器
        const datePickerWrapper = field.closest('.w-date-input');
        if (datePickerWrapper) {
            const dateInput = datePickerWrapper.querySelector('input');
            dateInput.readOnly = true;
            // 禁用日历图标点击
            datePickerWrapper.querySelector('.icon').style.pointerEvents = 'none';
            datePickerWrapper.style.backgroundColor = '#f3f4f6';
        }
        // 下拉选择框
        if (field.tagName === 'SELECT') {
            field.disabled = true;
            field.classList.add('bg-gray-100');
        }
    });
});

步骤2：通过Wagtail钩子注入JS #

在项目的wagtail_hooks.py中添加全局JS注入逻辑：

from django.utils.html import format_html
from wagtail import hooks
from django.templatetags.static import static

@hooks.register('insert_global_admin_js')
def inject_readonly_fields_js():
    return format_html(
        '<script src="{}"></script>',
        static('js/admin_readonly_fields.js')
    )

2. 后端表单层面标记只读字段并校验 #

为了避免前端被绕过导致字段值被篡改，需要在表单中标记目标字段并强制保留原始值：

步骤1：自定义页面表单 #

from wagtail.admin.forms import WagtailAdminModelForm
from .models import YourPageModel

class YourPageForm(WagtailAdminModelForm):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        # 给需要设为只读的字段添加自定义类，供JS识别
        self.fields['target_field_name'].widget.attrs.update({'class': 'make-readonly'})

    def clean_target_field_name(self):
        # 编辑页面时，强制返回数据库中的原始值
        if self.instance.pk:
            return self.instance.target_field_name
        # 新建页面时可根据需求处理（比如允许输入或返回默认值）
        return self.cleaned_data['target_field_name']

# 关联到你的页面模型
class YourPageModel(Page):
    target_field_name = models.CharField(max_length=255)
    # ...其他字段定义

    base_form_class = YourPageForm

关键说明 #

• 前端JS负责禁用用户交互，提升后台体验；后端clean方法负责确保字段值不被篡改，保障数据安全。
• 不同类型的Wagtail字段DOM结构不同，需针对性处理（比如Draftail编辑器需要禁用contenteditable并隐藏工具栏）。
• 若需批量处理多个字段，只需在表单的__init__方法中给对应的字段添加make-readonly类即可。

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