Django 1.11.10中Martor 1.2.5前端编辑器工具栏不显示求助

我帮你梳理下具体的实现步骤，按照这个流程来应该就能让前端编辑器和Admin里显示同款Martor工具栏：

1. 先确保forms.py里使用Martor专属字段 #

你需要把博客内容字段从普通的TextField替换成Martor提供的MartorFormField，这样表单才会关联编辑器组件。修改后的forms.py示例：

from django import forms
from martor.fields import MartorFormField
from .models import BlogPost  # 替换成你的博客模型

class BlogPostEditForm(forms.ModelForm):
    # 用MartorFormField替代原有的content字段
    content = MartorFormField()

    class Meta:
        model = BlogPost
        fields = ['title', 'content', 'category']  # 保留你需要的字段

2. 前端模板正确加载Martor资源并渲染表单 #

前端模板需要加载Martor的CSS、JS以及必要的依赖（比如jQuery），最简单的方式是使用{{ form.media }}自动引入这些资源。模板示例：

{% load static %}
{% load martor_tags %}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>编辑博客</title>
    <!-- 自动引入Martor的样式和脚本 -->
    {{ form.media }}
</head>
<body>
    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <div class="form-group">
            {{ form.title.label_tag }}
            {{ form.title }}
        </div>
        <div class="form-group">
            {{ form.content.label_tag }}
            {{ form.content }}  <!-- 这里会渲染带工具栏的编辑器 -->
        </div>
        <button type="submit">保存文章</button>
    </form>
</body>
</html>

注意：如果你的模板里已经手动引入了jQuery，要避免重复引入，Martor默认会包含jQuery，你可以在settings里通过MARTOR_ENABLE_CONFIGS的jquery项控制是否自动引入。

3. 同步settings.py里的Martor配置（确保和Admin一致） #

要让前端工具栏和Admin里的样式、按钮完全一致，需要在settings.py里配置Martor的工具栏按钮和其他参数，示例配置：

INSTALLED_APPS = [
    # ... 其他app
    'martor',
]

# Martor核心配置
MARTOR_ENABLE_CONFIGS = {
    'imgur': 'true',
    'mention': 'false',
    'jquery': 'true',  # 开启自动引入jQuery
    'living': 'false',
    'spellcheck': 'false',
    'hljs': 'true',
}

# 配置工具栏显示的按钮（和Admin默认一致）
MARTOR_TOOLBAR_BUTTONS = [
    'bold', 'italic', 'horizontal', 'heading', 'pre-code',
    'blockquote', 'unordered-list', 'ordered-list',
    'link', 'image-link', 'image-upload', 'emoji',
    'direct-mention', 'toggle-maximize', 'help'
]

4. 确保静态资源正确收集 #

运行以下命令收集Martor的静态文件，避免前端加载资源失败：

python manage.py collectstatic

常见问题排查 #

如果工具栏还是不显示，可以检查这几点：

• 打开浏览器开发者工具，查看网络请求，确认Martor的CSS和JS文件是否成功加载（没有404错误）；
• 确认模板里的{% load martor_tags %}标签已经加载；
• 检查视图函数里是否正确实例化了我们修改后的表单类，比如：

  from .forms import BlogPostEditForm
  
  def edit_post(request, pk):
      post = get_object_or_404(BlogPost, pk=pk)
      if request.method == 'POST':
          form = BlogPostEditForm(request.POST, instance=post)
          # ... 保存逻辑
      else:
          form = BlogPostEditForm(instance=post)
      return render(request, 'blog/edit_post.html', {'form': form})
  

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