Django summernote don't form is not displayed outside the admin panel

I'm trying to add WYSIWYG editor django-summernote to my django project. I found the problem that the editor is not showing up when I try to add it to the page.

On the form page, I don't have the summernote editor displayed. There is an error in the console with jQuery.

Error:

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)

Screen enter image description here

Code:

# 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>
Back to Top