Форма Django summernote don't не отображается вне панели администратора
Я пытаюсь добавить WYSIWYG редактор django-summernote в мой django проект. Я обнаружил проблему в том, что редактор не отображается, когда я пытаюсь добавить его на страницу.
На странице формы у меня не отображается редактор summernote. В консоли есть ошибка с jQuery.
Ошибка:
jquery-3.6.0.min.js:2 jQuery.Deferred exception: Cannot read properties of null (reading 'value') TypeError: Cannot read properties of null (reading 'value')
at HTMLDocument.<anonymous> (http://127.0.0.1:8000/summernote/editor/id_description/:43:25)
at e (http://code.jquery.com/jquery-3.6.0.min.js:2:30038)
at t (http://code.jquery.com/jquery-3.6.0.min.js:2:30340) undefined
S.Deferred.exceptionHook @ jquery-3.6.0.min.js:2
t @ jquery-3.6.0.min.js:2
Объект setTimeout (асинхронный)
(анонимная) @ jquery-3.6.0.min.js:2
c @ jquery-3.6.0.min.js:2
fireWith @ jquery-3.6.0.min.js:2
fire @ jquery-3.6.0.min.js:2
c @ jquery-3.6.0.min.js:2
fireWith @ jquery-3.6.0.min.js:2
ready @ jquery-3.6.0.min.js:2
B @ jquery-3.6.0.min.js:2
jquery-3.6.0.min.js:2 Uncaught TypeError: Cannot read properties of null (reading 'value')
at HTMLDocument.<anonymous> ((индекс):43:25)
at e (jquery-3.6.0.min.js:2:30038)
at t (jquery-3.6.0.min.js:2:30340)
Экран введите здесь описание изображения
Код:
# Settings.py
INSTALLED_APPS = [
...
'django_summernote', # WYSIWYG EDITOR
'editorapp', # my app
...
]
MEDIA_URL = 'media/'
MEDIA_ROOT = BASE_DIR / 'media'
# Urls
urlpatterns = [
...
path('editorapp/', include('editorapp.urls')),
path('summernote/', include('django_summernote.urls')),
...
]
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
# models.py
class NodesForm(forms.ModelForm):
description = SummernoteTextField()
class Meta:
model = Nodes
fields = ('node_description',)
# urls.py
path('', views.main, name='nodedoc_main'),
path("node/edit/<int:pk>",views.NodesUpdateView.as_view(), name="description-edit",),
# views.py
class NodesUpdateView(UpdateView):
model = Nodes
fields = ["node_description"]
# template
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Note edit</title>
</head>
<body>
<h1>HELLO {{ object.pk }}</h1>
<form method="POST">
{% csrf_token %}
{{ form.media }}
{{ form.as_p }}
<iframe id="id_description_iframe" src="/summernote/editor/id_description/" frameborder="0" width="720" height="480" style="height: 480px;"></iframe>
<button type="submit" class="btn btn-primary btn-block mt-1">Update Post</button>
</form>
<script>
var settings_id_description = {
"width": 720,
"height": 480,
"lang": "en-US",
"toolbar": [
["style", ["style"]],
["font", ["bold", "italic", "underline", "superscript", "subscript", "strikethrough", "clear"]],
["fontname", ["fontname"]],
["fontsize", ["fontsize"]],
["color", ["color"]],
["para", ["ul", "ol", "paragraph"]],
["height", ["height"]],
["table", ["table"]],
["insert", ["link", "picture", "video", "hr"]],
["view", ["fullscreen", "codeview"]],
["help", ["help"]]],
"url": {
"language": "/static/summernote/lang/summernote-en-US.min.js",
"upload_attachment": "/summernote/upload_attachment/"
}
};
</script>
</body>
</html>