Python中Django 后台自定义表单控件

以下是Python中Django后台自定义表单控件的完整攻略，包含两个示例。

1. 确定需要自定义的控件类型

在Django后台中，我们常常需要用到一些自定义表单控件，比如富文本编辑器、图片上传控件等。在开始之前，首先需要明确需要自定义的控件类型。

2. 创建自定义表单控件

创建自定义表单控件需要继承Django的FormField类，实现__init__()和prepare_value()方法。

例如，如果需要自定义图片上传控件，可以如下实现：

from django import forms

class ImageUploadInput(forms.ClearableFileInput):
    template_name = 'widgets/image_upload.html'

    def __init__(self, attrs=None):
        super().__init__(attrs)

在上面的示例中，我们继承了Django的ClearableFileInput类，并定义了自己的模板文件。

接下来，我们还需要为该控件实现模板文件。

3. 编写模板文件

在上一步中，我们定义了模板文件的路径为'widgets/image_upload.html'，因此需要在应用的'xxx/templates'目录下创建'widgets'文件夹，并在该文件夹中创建'image_upload.html'文件。

下面是一个简单的'image_upload.html'文件的实现：

{% if not is_initial %}
  <img src="{{ value.url }}" style="max-width: 100%;"/>
{% endif %}
{{ widget.input }}

在该模板文件中，我们首先判断是否已经为该控件上传过图片，如果上传过则显示已上传的图片，否则只显示控件。

4. 将自定义控件应用于Django后台

完成自定义控件的创建和模板文件的编写后，它们就可以在Django后台的表单中使用了。

在前端展示的时候，我们可以直接为相应的模型字段设置该控件，例如：

from django.contrib import admin
from django.utils.html import format_html
from myapp.models import ImageModel

class ImageModelAdmin(admin.ModelAdmin):
    formfield_overrides = {
        models.ImageField: {'widget': ImageUploadInput}
    }

    def image_preview(self, obj):
        return format_html('<img src="{}" style="max-width: 100%;"/>'.format(obj.image.url))
    image_preview.short_description = 'Image'

在上述代码中，我们通过formfield_overrides属性为ImageModel模型中的ImageField字段设置了我们刚才定义过的自定义控件。

示例1：自定义图片上传控件

下面是一个针对图片上传控件的完整示例：

from django import forms
from django.contrib import admin
from django.utils.html import format_html
from myapp.models import ImageModel

class ImageUploadInput(forms.ClearableFileInput):
    template_name = 'widgets/image_upload.html'

    def __init__(self, attrs=None):
        super().__init__(attrs)

class ImageModelAdmin(admin.ModelAdmin):

    formfield_overrides = {
        models.ImageField: {'widget': ImageUploadInput}
    }

    def image_preview(self, obj):
        return format_html('<img src="{}" style="max-width: 100%;"/>'.format(obj.image.url))
    image_preview.short_description = 'Image'

    list_display = ('image_preview',)

    fields = ('image', 'image_preview')

admin.site.register(ImageModel, ImageModelAdmin)

在上面的示例中，我们首先创建了一个自定义的图片上传控件ImageUploadInput，并将其应用于ImageModel模型的ImageField字段中。

在Django后台您会看到，上传图片之后，图片预览自动展示在输入框下方。我们还通过list_display字段和image_preview方法为该模型添加了一个显示图片预览的表格视图。

示例2：自定义Markdown编辑器

下面是另一个示例，该示例实现了一个自定义的Markdown编辑器。

from django import forms
from django.contrib import admin
from django.utils.safestring import mark_safe
import mistune

class MarkdownInput(forms.Textarea):
    def render(self, name, value, attrs=None, renderer=None):
        content = super().render(name, value, attrs=attrs)
        html = mistune.markdown(value)
        output = """
        <div class="markdown-editor">
            <div class="markdown-editor-input">
            %s
            </div>
            <div class="markdown-editor-preview markdown">
            %s
            </div>
        </div>
        """ % (content, mark_safe(html))
        return output

class BlogAdmin(admin.ModelAdmin):
    formfield_overrides = {
        models.TextField: {'widget': MarkdownInput}
    }
    list_display = ('title', 'preview', 'pub_date')

    def preview(self, obj):
        return mark_safe(mistune.markdown(obj.text[:50]))
    preview.short_description = 'Preview'

admin.site.register(Blog, BlogAdmin)

在上面的示例中，我们首先创建了一个自定义的Markdown编辑器控件MarkdownInput，并将其应用于Blog模型的TextField字段中。

在该示例中，我们使用了mistune库将markdown文本转换成HTML格式，并在输入框和预览框之间创建了一个分隔板。

在Django后台界面中，您会看到输入框和预览框的动态视图，实时显示您输入的内容。至此，我们完成了一个自定义的Markdown编辑器控件的实现。

这就是Python中Django后台自定义表单控件的完整攻略，希望能够对您有所帮助。