跳转至

Markdown富文本编辑器 django-mdeditor

2018-11-29 by dongnan

目标

  • 为 Django Admin 后台添加 django-mdeditor 富文本编辑器。
  • 使用 django-mdeditor 编写 markdown 文档。

环境

软件 版本
Django 1.11
Python 3.4
Ubuntu Desktop 14.04

步骤

安装

pip install django-mdeditor

配置

在 settings.py 配置文件，注册 mdeditor 应用:

INSTALLED_APPS = [
    ...省略
    'mdeditor',
]

在 settings.py配置文件 中添加媒体文件的路径配置:

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

创建存储目录

  • 上传图片时，django 将自动在项目根目录下创建 uploads/editor 目录，用于存放上传的图片。
  • editor 目录，可以通过设置 mdeditor/configs.py 文件设置。

在项目的根 urls.py 中添加扩展url和媒体文件url:

from django.conf.urls import url, include
from django.conf.urls.static import static
from django.conf import settings
# ...省略

urlpatterns = [
    # ...省略
    url(r'mdeditor/', include('mdeditor.urls'))
]

if settings.DEBUG:
    # static files (images, css, javascript, etc.)
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

调整 models

# models.py 文件
# 导入 MDTextField 类
from mdeditor.fields import MDTextField

# 调整示例 Article content 字段为 MDTextField 类型：
class Article(models.Model):

    title = models.CharField(max_length=80)
    content = models.MDTextField()
    # ....省略        

    def __str__(self):
        return self.title

如果你没有在 admin后台找到设置的类，需要在 admin.py文件中注册 Article model 例如:

# admin.py 文件
from django.contrib import admin
from .models import Article

# Register your models here.
admin.site.register(Article)
# 省略 ...

执行迁移操作，完成调整 model数据库表结构。

python manage.py makemigrations
python manage.py migrate

在后台测试 django-mdeditor

登录 django admin 后台，选择相应的 model 与表，点击 '添加'操作，你会看到如下界面。

实时预览，真是太棒了。

小结

通过 django-mdeditor 编辑器上传的图片，url 地址按照 MEDIA_URL 设置为准，例如 E81A0560.jpg 图片:

  • 目录: uploads/editor/
  • URL: http://your-server/media/editor/E81A0560_20181127224529944125.jpg

参考

回到页面顶部