How to add django-editorjs-fields EditorJsTextField or EditorJsJSONField in html template答案

【问题标题】：How to add django-editorjs-fields EditorJsTextField or EditorJsJSONField in html templateHow to add django-editorjs-fields EditorJsTextField or EditorJsJSONField in html template
【发布时间】：2022-12-01 23:03:24
【问题描述】：

I am trying to add block style editor with django-editorjs-fields. It work django admin fine but not working with template. I properly configure urls.py for static files. Here is my code sample..... models.py

class Post(models.Model):
    title = models.CharField(max_length=255, blank=False)
    slug = models.CharField(max_length=255, unique=True)
    image = models.ForeignKey(Media, on_delete=models.SET_NULL, blank=True, null=True)
    content = EditorJsTextField(blank=True, null=True)

forms.py

class PostForm(forms.ModelForm):
    class Meta:
        model = Post
        fields = '__all__'
        widgets = {
            'content': EditorJsWidget(plugins=["@editorjs/image", "@editorjs/header"])
        }

views.py

class PostFormView(FormView):
    form_class = PostForm
    template_name = 'add.html'
    success_url = '/'

    def form_valid(self, form):
        form.save()
        return super().form_valid(form)

template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">Save</button>
</form>
</body>
</html>

Output: https://prnt.sc/ytMX_522Y4zF

Not showing expected output. Show only normal textfield

Expected output: https://prnt.sc/l0Uku9Xt-yNl

【问题讨论】：

标签： django django-forms django-templates editorjs

【解决方案1】：

for your field content if they return null. you need to add {{ form.media }} in bellow {{ form.as_p }} from your html file.

can be used as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" method="post">
        {% csrf_token %}
        {{ form.as_p }}
        {{ form.media }} <!-- new -->
        <button type="submit">Save</button>
</form>
</body>
</html>

The details about this, you can be found at documentation on github

【讨论】：