如何在Django HTML模板中配置django-editorjs-fields编辑器

问题核心是：Django Admin会自动处理编辑器组件的静态资源加载，但自定义模板里得手动引入EditorJsWidget依赖的CSS和JS文件，不然只会渲染出普通文本框。

具体解决步骤： #

1. 在模板中添加表单媒体资源
   编辑器的样式、脚本都需要通过{{ form.media }}加载，把它放到模板的<head>标签里或者<body>结束前就行。修改你的模板代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {{ form.media }} <!-- 加载编辑器所需的静态资源 -->
</head>
<body>
<form action="" method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">Save</button>
</form>
</body>
</html>

2. 确认静态文件配置无误
   虽然你说已经配置了静态文件URL，还是再检查下settings.py里的相关项：

STATIC_URL = '/static/'
STATICFILES_DIRS = [BASE_DIR / 'static']  # 有自定义静态目录的话需配置

同时确保django.contrib.staticfiles在INSTALLED_APPS列表里。

3. 验证第三方插件资源加载
   如果用了@editorjs/image、@editorjs/header这类插件，要确保它们的资源已正确安装（比如通过npm下载到静态目录），或者给EditorJsWidget配置CDN地址：

from django_editorjs_fields.widgets import EditorJsWidget

class PostForm(forms.ModelForm):
    class Meta:
        model = Post
        fields = '__all__'
        widgets = {
            'content': EditorJsWidget(
                plugins=[
                    "@editorjs/image",
                    "@editorjs/header"
                ],
                # 可选：指定插件的CDN地址
                plugin_cdn={
                    "@editorjs/image": "https://cdn.jsdelivr.net/npm/@editorjs/image@2.6.0/dist/bundle.min.js",
                    "@editorjs/header": "https://cdn.jsdelivr.net/npm/@editorjs/header@2.7.0/dist/bundle.min.js"
                }
            )
        }

做完这些修改后，自定义模板里就能正常渲染块样式的EditorJS编辑器了。

内容的提问来源于stack exchange，提问作者Adil