Django 中 Markdown 编辑器的集成指南

Django 中 Markdown 编辑器的集成指南 ✨

在 Web 网站开发过程中，长文本内容的呈现需要清晰的排版来辅助阅读 📚。虽然可以直接使用 TextField 文本域，但它有一个明显的缺陷：无法支持任何排版格式 😫。

当你从网上复制内容时，所有文本都会堆砌在一行，缺乏标题、分段和颜色等样式元素。

传统解决方案及其局限性 ⚠️

在网上搜索解决方案时，大部分推荐使用富文本编辑器 RichText。这种方法在一定程度上可以解决简单的排版需求，但仍然存在一个问题：

当你从某些网站（如 AI 助手豆包或 DeepSeek）复制内容时，经常无法正常显示原有的样式效果 🎨。

终极解决方案：Markdown 编译器 🚀

最有效且最终的解决方案是使用 Markdown 插件编译器，它能完美解决上述所有问题！下面简要介绍在 Python Web（Django）框架中安装此编译器的流程和方法。

💡 注：本文主要为学习记录，如有不明白的地方欢迎留言交流！

前提条件 🎯

假设我们有一个个人博客项目，目前包含：

• 文章分类表（Tag）📁
• 文章详情表（Blog）📄

集成步骤 🛠️

第一步：配置数据模型 💾

在 models.py 中声明 Markdown 字段：

from mdeditor.fields import MDTextField

class Blog(models.Model):
    content_markdown = MDTextField(verbose_name='内容')
    # 其他字段...

我把这两个表的完整代码放在这里做个参考，当然我们这里其实只是内容字段设置为markdown格式的！

from django.db import models
from mdeditor.fields import MDTextField
from django.utils import timezone


class Tag(models.Model):
    name = models.CharField(max_length=100, verbose_name="分类名称")

    def __str__(self):
        return self.name

    def article_count(self):
        """返回该分类下的已发布文章数量"""
        return Blog.objects.filter(tag=self, is_published=True).count()

    class Meta:
        verbose_name = "博客分类"
        verbose_name_plural = "博客分类"


class Blog(models.Model):
    title = models.CharField("标题", max_length=200)
    cover_image = models.ImageField("封面图", upload_to='blog/covers', blank=True, null=True)
    excerpt = models.TextField("简介", max_length=500, blank=True)
    read_time = models.IntegerField("阅读时间", default=10)
    tag = models.ForeignKey("Tag", on_delete=models.CASCADE, verbose_name="分类", default=1)

    # Markdown 内容支持
    content_markdown = MDTextField(verbose_name='内容')

    # 发布信息
    is_published = models.BooleanField("是否发布", default=True)
    is_recommend = models.BooleanField("是否推荐", default=False)
    publish_time = models.DateTimeField("发布时间", default=timezone.now)

    # 统计信息
    view_count = models.IntegerField("浏览量", default=0)

    # 系统信息
    created_at = models.DateTimeField("创建时间", auto_now_add=True)
    updated_at = models.DateTimeField("更新时间", auto_now=True)

    # 关键词
    keywords = models.CharField("关键词", max_length=300, help_text="用逗号分隔多个关键词，例如：python,前端,编程")

    def __str__(self):
        return self.title

    def get_keywords_list(self):
        """将关键词字符串转为列表"""
        return [i.strip() for i in self.keywords.split(',') if i.strip()]

    def increment_view_count(self):
        """增加浏览量"""
        self.view_count += 1
        self.save(update_fields=['view_count'])

    class Meta:
        verbose_name = "博客日志"
        verbose_name_plural = "博客日志"
        ordering = ['-publish_time']
        get_latest_by = 'publish_time'

第二步：注册模板标签 🔧

在应用内创建 templatetags 文件夹，然后创建 markdown_extras.py 文件：

# blog/templatetags/markdown_extras.py
from django import template
from django.utils.safestring import mark_safe
import markdown

register = template.Library()

@register.filter(name='markdown')
def markdown_format(text):
    """将 Markdown 文本转换为 HTML"""
    # 使用常用扩展支持表格、代码块等功能
    extensions = [
        'markdown.extensions.extra',
        'markdown.extensions.codehilite',
        'markdown.extensions.toc'
    ]
    return mark_safe(markdown.markdown(text, extensions=extensions))

第三步：配置应用设置 ⚙️

在 settings.py 文件的 INSTALLED_APPS 中添加：

INSTALLED_APPS = [
    # ... 其他应用
    'mdeditor',  # 添加此行
    'your_app_name',
]

第四步：前端渲染实现 🎨

在后端视图中正常获取文章内容：

def detail(request, blog_id):
    blog = Blog.objects.get(id=blog_id)
    # 其他逻辑...

在前端模板中引入自定义标签并渲染内容：

{% load markdown_extras %}

<div class="article-content">
    {{ blog.content_markdown|markdown }}
</div>

效果展示 🌟

完成以上步骤后，你的博客文章就能正常显示 Markdown 格式的内容了！🎉

至于后台管理界面，只需在 admin.py 中进行简单配置即可，操作十分便捷 👍。

通过这种集成方式，你的博客将能够完美呈现从各种来源复制的 Markdown 格式内容，提供优秀的阅读体验！💫

---

希望这篇指南能帮助你顺利集成 Markdown 编译器！如有任何问题，欢迎随时交流~ 😊