Django-ckeditor {{ form.media }} не работает в html
Я пытаюсь получить вид ck-редактора из forms.py .
Прочитав документацию и даже на 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-файл)
На самом деле я получил решение.
когда вы вызываете {{ notes_form.media }}
, он загружает файлы скрипта, т.е. <script src="/assets/ckeditor/ckeditor-init.js"></script><script src="/assets/ckeditor/ckeditor/ckeditor.js"></script>
. Из-за этого JavaScript загружается первым и не получает textarea, которая появляется (благодаря) {{ notes_form.as_p }}
после этого.
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>