使 HTML 元素位于表单 textarea 下答案

【问题标题】：Make HTML element be under form textarea使 HTML 元素位于表单 textarea 下
【发布时间】：2020-01-26 23:43:48
【问题描述】：

我正在尝试通过修改 change_form.html 来自定义我的管理表单。到目前为止，这是我所拥有的：

在我的 forms.py 中，我有：

class ProblemForm(forms.ModelForm):

slug = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'link'}))

topic = forms.ModelChoiceField(label = "Topic", queryset = Topic.objects.all())

questionToProblem = forms.CharField(label = "Question", widget = CustomAdminPageDown(attrs={'id' : 'mathInputForQuestion', 'onchange':'Preview.Update()'}))

solutionToProblem = forms.CharField(label = "Solution", widget = CustomAdminPageDown(attrs={'id' : 'mathInputForSolution'}))

class Meta:

model = Problem

fields = ('questionToProblem', 'solutionToProblem')

在我的 change_form.html 中，我有：

{% extends "admin/change_form.html" %}

{% block after_field_sets %}{{ block.super }}

<body>

<p>Preview is shown here:</p>

<div id="MathPreview" style="border:1px solid; padding: 3px; width:50%; height: 20%; margin-top:20px" class="format-paragraph"></div>

<div id="MathBuffer" style="border:1px solid; padding: 3px; width:50%; height: 20%; margin-top:20px;

visibility:hidden; position:absolute; top:0; left: 0"></div>

</body>

但是，我希望 在 questionToProblem 表单下，这样当我查看页面时，div 就在 textarea 的正下方。我该怎么做？

【问题讨论】：

标签： django django-forms

【解决方案1】：

您可以改为编写一个自定义小部件，它是 CustomAdminPageDown 的子类，并且根据您使用的 Django 版本，您可以通过多种方式扩展以添加预览块。

Django widget override template

此外，您可以使用 Media 类关联包含 Preview.Update() javascript 的文件以保持整洁。

https://docs.djangoproject.com/en/dev/topics/forms/media/#topics-forms-media

【讨论】：

似乎大多数资源都是关于完全覆盖模板，但我需要的只是添加几个 HTML 元素。我会使用 render() 来做到这一点吗？
这取决于您使用的 Django 版本。从 1.11 开始，小部件在模板中呈现。在此之前，它们是用 Python 渲染的。 docs.djangoproject.com/en/1.11/ref/forms/renderers 您的模板看起来与您的示例中的几乎相同，但将扩展当前小部件的模板而不是整个表单的模板。然后，模板将用于渲染小部件。