django-ckeditor {{ form.media }} 在 html 中不起作用答案

【问题标题】：django-ckeditor {{ form.media }} not working in htmldjango-ckeditor {{ form.media }} 在 html 中不起作用
【发布时间】：2022-01-05 10:10:49
【问题描述】：

我正在尝试从 forms.py 获取 ck-editor 外观。
在阅读文档甚至在 YouTube 上之后，我没有得到我想要的结果。
我正在分享我的不同文件。
请解决这个问题。

HTML 文件

<form method="post" enctype="multipart/form-data">
   <div class="col me-2">
          {% csrf_token %}
          {{ notes_form.media }}
          {{ notes_form.as_p }}
   </div>
   <div class="col-auto">
      <button class="btn btn-outline-success btn-sm border rounded-pill border-success float-end todo-submit" type="button">
            <i class="fas fa-check"></i>
        </button>
    </div>
</form>

Form.py

class NotesForm(ModelForm):
    class Meta:
        model = Notes
        fields = ['description']

    def __init__(self, *args, **kwargs):
        super(NotesForm, self).__init__(*args, **kwargs)
        for field in self.fields:
            self.fields[field].widget.attrs.update({
                'class': 'form-control'
            })

views.py

def index(request):
    if request.user.is_authenticated:
        params = {
            "notes_form": NotesForm()
        }
        return render(request, 'dashboard.html', params)
    else:
        return render(request, 'home.html')

输出（html文件）

output image

【问题讨论】：

您是在本地还是在生产服务器上执行此操作？
在您的NotesForm 中，您已将字段指定为描述fields = ['description']，您只能访问该属性，例如。 {{ notes_form.description }} 如果您想访问媒体，则必须在您的字段中添加它。
用于生产服务器
感谢您的回复。

标签： html django django-ckeditor

【解决方案1】：

其实我得到了解决方案。

当您调用{{ notes_form.media }} 时，它会加载脚本文件，即<script src="/assets/ckeditor/ckeditor-init.js"></script><script src="/assets/ckeditor/ckeditor/ckeditor.js"></script>。由于这个 JavaScript 首先加载，它没有得到在此之后出现（由于）{{ notes_form.as_p }} 的 textarea。

HTML 文件

<form method="post" enctype="multipart/form-data">
   <div class="col me-2">
          {% csrf_token %}
          {{ notes_form.media }}
          {{ notes_form.as_p }}
   </div>
   <div class="col-auto">
      <button class="btn btn-outline-success btn-sm border rounded-pill border-success float-end todo-submit" type="button">
            <i class="fas fa-check"></i>
        </button>
    </div>
</form>

更新的 HTML 文件

<form method="post" enctype="multipart/form-data">
   <div class="col me-2">
          {% csrf_token %}
          {{ notes_form.as_p }}
          {{ notes_form.media }}
   </div>
   <div class="col-auto">
      <button class="btn btn-outline-success btn-sm border rounded-pill border-success float-end todo-submit" type="button">
            <i class="fas fa-check"></i>
        </button>
    </div>
</form>

【讨论】：