将 Markdown 编辑器集成进 Django 表单内

0. 开端

肯定有很多人想要在自己的网站里集成一个漂亮的 Markdown 编辑器。
所以说，今天我们就要教大家如何集成一个简单且好看 Markdown 编辑器。

1. 选型

此处比较推荐 django-mdeditor。

优点：

  1. 它作为富文本编辑器的时候，页面好看且直观。
  2. 作为 MarkDown 编辑器，它对所有基础语法都是支持的。
  3. 完美兼容 Django Form 类。

缺点：

  1. 当你忘记在行末加上标记换行时的两个空格直接换行的话，它的预览页面是照常换行的。但是！我们解析 Markdown 使用的 markdown 库是不能不加空格的！
  2. 不支持 $\LaTeX$ 预览。
  3. 可能是博客园同款

2. 配置

此处我们先按照惯例，先安装这个库：

pip install django-mdeditor

为了解析我们写出来的 Markdown 文本，我们还要再安装另外一个库：markdown。它可以将 Markdown 文本转为 HTML 的代码。

pip install markdown

然后接下来，为了能够存储图片，我们还要在 Django 项目设置里面加上几行代码：

INSTALL_APPS = [
    ....
    'mdeditor', # 要记得在 INSTALL_APPS 里面加上安装的库
]

# 跳过一堆配置

MEDIA_ROOT = os.path.join(BASE_DIR, 'image/') 
# MEDIA_ROOT 的含义就是用户上传的文件存在系统的哪里
# 另外你有记得 import os 吗？
MEDIA_URL = '/image/'
# MEDIA_URL 的含义是用户从那个URL访问到由用户上传的文件

我们还需要在项目配置的 urls.py 里加点东西：

from django.conf.urls import url
from django.conf import settings
from django.conf.urls.static import static

# 跳过

urlpatterns = [
    ....
    url(r'mdeditor/', include('mdeditor.urls')),
    # 和你自己的项目同理，第三方库想要使用，也需要自己的一亩三分地
]

if settings.DEBUG: # 如果正在调试模式下的话
    urlpatterns += static(settings.MEDIA.URL, document_root=settings.MEDIA_ROOT)

3. 实践

我们先创立一个临时小项目。
然后新建一个 APP，加 URL，走流程
然后，我们在APP中新建 form.py
我们在 form.py 里导入 mdeditor 库
然后用 MDTextFormField() 代替 models.CharField()

from django import forms
from mdeditor.fields import MDTextFormField

class MarkdownForm(forms.Form):
    markdown = MDTextFormField()

# 应该可以理解吧

然后为了保存下来这个表单，我们还需要一个 model ：

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

class Markdown(models.Model):
    markdown_text = MDTextField()
    html_text = models.TextField() # 这玩意干嘛用？待会儿就知道了

然后，我们要在 views.py 里处理表单和表单传回来的数据：

from django.shortcuts import render
from .forms import MarkdownForm
from .models import Markdown
import markdown

def index(request):
    form = MarkdownForm()
    context = {'form':form}
    return render('index.html', context=context)

def process(request):
    markdown_text = request.POST['markdown']
    html_text = markdown.markdown(markdown_text)

    new_markdown = Markdown()
    new_markdown.markdown_text = markdown_text
    # html_text 指的是 markdown_text 渲染出来的 HTML 代码
    # 渲染了这一次，以后都不用渲染了
    new_markdown.html_text = html_text
    new_markdown.save()

TIPS：在前端渲染这个表单是要注意，还需要在前面加上一句

{{ form.media }}

这句话用于渲染表单所需的 CSS 和 JS 文件，要不然长相一塌糊涂......
然后，我们要在前端渲染 html_text，要记得要取消把 html_text 转义：

{{ html_text|safe }}

如果你不取消转义的话，Django Template Language 为了你的网站安全起见，会将这一堆 HTML 代码原本的模样显示出来，那么你将会在屏幕上看到一大坨 HTML 代码和一张惊奇的脸。

最后的效果还是不错的：

PS：此处偷懒的作者没写模板，直接用的自己的网站的图片
到了这一步，你一定会将 Markdown 集成进你的表单，写出更好的富文本体验了吧！
所以说，现在将它加进项目中吧！

Django小知识

相关

标签