Django-ckeditor富文本在DetailView无法正常渲染问题求助

1. 修正表单定义错误 #

你的forms.py存在字段不匹配问题：自定义了多余的content字段，但实际要编辑的是模型里的notes字段，导致表单可能没有正确绑定富文本编辑器到notes。修改forms.py如下：

from django import forms
from django.forms import ModelForm
from ckeditor_uploader.widgets import CKEditorUploadingWidget
from .models import Server

class ServerForm(ModelForm):
    class Meta:
        model = Server
        # 包含UpdateView中需要编辑的所有字段
        fields = ['displayname', 'ip_address', 'description', 'model', 'location', 'hosting_provider', 'production', 'notes']
        widgets = {
            # 给notes字段指定富文本编辑器组件
            'notes': CKEditorUploadingWidget(),
        }

2. 修正UpdateView的表单配置 #

views.py中的ServerUpdate同时指定了form（应为form_class）和fields，这两个属性冲突，Django会忽略自定义表单而使用默认生成的表单。修改如下：

class ServerUpdate(LoginRequiredMixin, UpdateView):
    model = Server
    # 使用form_class指定自定义表单，替换原来的form
    form_class = ServerForm
    template_name_suffix = '_update_form'
    # 移除fields属性，因为自定义表单已经定义了字段

3. 验证数据库存储内容 #

编辑并保存一个Server的notes内容（比如添加加粗文本、列表），然后查看数据库中notes字段的存储值：

• 如果存储的是纯文本（没有<b>、<ul>等HTML标签），说明表单问题未解决，需重新检查表单配置。
• 如果存储的是HTML代码，继续下一步。

4. 确保详情页模板正确渲染 #

检查模板语法 #

确认server_detail.html中的{{ server.notes|safe }}没有拼写错误，比如safe是否正确，有没有多余空格（你的代码里|safe前后有空格是允许的，但需确保无拼写错误）。

查看页面源代码 #

打开详情页，右键查看页面源代码，找到notes对应的HTML部分：

• 如果看到的是转义后的代码（比如<p>测试</p>），说明|safe过滤器未生效，检查模板是否有其他逻辑覆盖了该值。
• 如果看到的是原始HTML（比如<p>测试</p>）但样式未显示，说明缺少富文本样式，需在详情页模板的<head>部分引入CKEditor的样式：

  {% load static %}
  <link rel="stylesheet" href="{% static 'ckeditor/ckeditor.css' %}">
  

5. 额外排查点 #

• 确认django-ckeditor已正确安装并配置到INSTALLED_APPS中：

  INSTALLED_APPS = [
      # ...其他应用
      'ckeditor',
      'ckeditor_uploader',
  ]
  

• 检查settings.py中的CKEditor配置是否正确，比如CKEDITOR_UPLOAD_PATH是否设置。

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