求Django 2.0适配的Markdown编辑器（支持图片上传与LaTeX）实现示例

我之前在Django 2.0里折腾过一模一样的需求，踩了不少版本兼容的坑，给你一个亲测能跑通的示例，专门针对Django 2.0调整了所有配置：

第一步：安装兼容版本的markdownx #

最新版的markdownx已经不再支持Django 2.0，必须安装指定版本才能正常运行：

pip install django-markdownx==2.0.30

第二步：配置settings.py #

打开项目根目录的settings.py，依次完成以下修改：

1. 将markdownx加入INSTALLED_APPS：

INSTALLED_APPS = [
    # 保留你已有的其他app...
    'markdownx',
]

2. 配置媒体文件路径（这是图片上传的必备配置）：

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

3. 开启LaTeX支持并配置基础扩展：

MARKDOWNX_MARKDOWN_EXTENSIONS = [
    'markdown.extensions.extra',  # 启用表格、代码块等基础Markdown功能
    'markdown.extensions.mathjax',  # 支持LaTeX公式渲染
    'markdown.extensions.toc',  # 可选，自动生成目录
]

# 可选：限制图片上传的格式和大小
MARKDOWNX_UPLOAD_CONTENT_TYPES = ['image/jpeg', 'image/png', 'image/gif']
MARKDOWNX_MAX_UPLOAD_SIZE = 5242880  # 限制为5MB

第三步：配置urls.py #

在项目根目录的urls.py中添加以下内容：

from django.conf import settings
from django.conf.urls.static import static
from django.urls import path, include

urlpatterns = [
    # 保留你已有的其他URL规则...
    path('markdownx/', include('markdownx.urls')),
]

# 开发环境下必须添加媒体文件的映射，否则上传的图片无法访问
if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

第四步：为模型字段配置编辑器 #

假设你有一个Article模型，要给content字段配置编辑器，直接替换成MarkdownxField即可：

from django.db import models
from markdownx.models import MarkdownxField

class Article(models.Model):
    title = models.CharField(max_length=200)
    content = MarkdownxField()  # 替换普通TextField为MarkdownxField
    created_at = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.title

第五步：前台表单与视图配置（可选） #

如果需要在前台页面使用编辑器，先创建表单：

from django import forms
from markdownx.fields import MarkdownxFormField
from .models import Article

class ArticleForm(forms.ModelForm):
    content = MarkdownxFormField()

    class Meta:
        model = Article
        fields = ['title', 'content']

再用基于类的视图快速实现创建和详情页：

from django.views.generic import CreateView, DetailView
from .models import Article
from .forms import ArticleForm

class ArticleCreateView(CreateView):
    model = Article
    form_class = ArticleForm
    success_url = '/articles/'  # 提交后的跳转路径

class ArticleDetailView(DetailView):
    model = Article

别忘了在urls.py中添加视图路径：

urlpatterns += [
    path('articles/', ArticleDetailView.as_view(), name='article-list'),
    path('articles/new/', ArticleCreateView.as_view(), name='article-create'),
    path('articles/<int:pk>/', ArticleDetailView.as_view(), name='article-detail'),
]

第六步：模板配置 #

1. 编辑器页面模板（示例：article_form.html） #

{% extends 'base.html' %}
{% load markdownx_tags %}

{% block content %}
<h1>撰写文章</h1>
<form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">发布</button>
</form>

<!-- 必须加载markdownx的静态资源，否则编辑器无法渲染 -->
{{ form.media }}
{% endblock %}

2. 文章详情页模板（示例：article_detail.html） #

{% extends 'base.html' %}
{% load markdownx_tags %}

{% block content %}
<h1>{{ article.title }}</h1>
<p>发布时间：{{ article.created_at }}</p>
<!-- 渲染Markdown内容，包括LaTeX公式 -->
{{ article.content|markdownify }}

<!-- 引入MathJax脚本，实现LaTeX公式的前端渲染 -->
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
{% endblock %}

第七步：测试运行 #

1. 执行数据库迁移：

python manage.py makemigrations
python manage.py migrate

2. 启动开发服务器：

python manage.py runserver

3. 测试功能：
   • 访问后台/admin/，找到Article模型，就能看到带图片上传按钮的Markdown编辑器
   • 前台访问/articles/new/，测试输入LaTeX公式（比如$$E=mc^2$$）和上传图片
   • 提交后访问详情页，确认内容和公式都能正常渲染

常见坑点排查 #

• 编辑器不显示：检查模板中是否加载了{{ form.media }}，开发环境下确保DEBUG=True
• 图片上传后无法显示：确认MEDIA_ROOT和MEDIA_URL配置正确，urls.py中的媒体映射已添加
• LaTeX公式不渲染：确保模板中引入了MathJax脚本，且settings.py中添加了markdown.extensions.mathjax扩展

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