dongnan
总版主
总版主
  • 粉丝52
  • 发帖数2168
  • 铜币13301枚
  • 威望5857点
  • 银元150个
  • 社区居民
  • 最爱沙发
  • 忠实会员
  • 原创写手
阅读:83回复:0

django-mdeditor 友好的 markdown富文本编辑器

楼主#
更多 发布于:2018-11-29 14:16
目标
为 django admin 后台添加 django-mdeditor 富文本编辑器。
使用 django-mdeditor 编写 markdown 文档。

环境
Django-1.11
Python-3.4
Ubuntu 14.04 Desktop

步骤
1. 安装
pip install django-mdeditor

2. 配置
# 在 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)

3. 调整 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


5. 在后台测试 django-mdeditor
登录 django admin 后台,选择相应的 model 与 表,点击 '添加'操作,你会看到如下界面。

图片:django-mdeditor-1.png


实时预览,真是太棒了。

扩展
通过 django-mdeditor 编辑器上传的图片,url 地址按照 MEDIA_URL 设置为准,例如 E81A0560.jpg 图片:
目录:  uploads/editor/ 。
url: http://your-server/media/editor/E81A0560_20181127224529944125.jpg

参考:
github-django-mdeditor
pypi
#
游客

返回顶部