Django加入markdown编辑器及markdown上传图片不回显避坑

2022年7月15日 23:29
Python
0 喜欢

一般来说一个CMS系统如博客系统都需要一个好的富文本编辑器，现在大家更多的是选择MarkDown编辑器来编辑内容。Django作为python的主流web开发框架当然少不了markdown的插件。本文介绍如何在Django框架中引入markdown编辑器及在使用markdown时的注意事项。

在Django框架中引入markdown编辑器主要是通过安装引入Django-mdeditor库来实现。 Django-mdeditor 是基于 Editor.md 的一个 django Markdown 文本编辑插件应用。其官方下载地址见 https://pypi.org/project/django-mdeditor/ 根据官方指导文档

一、安装使用

1、安装django-mdeditor

pip install django-mdeditor

2、在 settings 配置文件 INSTALLED_APPS 中添加 mdeditor

INSTALLED_APPS = [
    'blog',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'django_filters',#注册条件查询
    # 注册markdown的应用
    'mdeditor',
]

3、针对django3.0+修改 frame 配置

X_FRAME_OPTIONS = 'SAMEORIGIN'  # django 3.0 + 默认为 deny

4、在 settings 中添加媒体文件的路径配置

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

在你项目根目录下创建 uploads/editor 目录，用于存放上传的图片。

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

注意是在项目的根 urls.py 中添加扩展url和媒体文件url，而不是在其他项目应用的urls.py中添加

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)

6、在项目model中应用markdown

示例代码如下：

'''博客文章'''
class BlogPost(BaseModel):
    id = models.AutoField(primary_key=True)
    title = models.CharField(max_length=200, verbose_name='文章标题', unique = True)
    category = models.ForeignKey(BlogCategory, blank=True, null=True, verbose_name='文章分类', on_delete=models.DO_NOTHING)
    isTop=models.BooleanField(default=False,verbose_name='是否置顶')
    isHot=models.BooleanField(default=False,verbose_name='是否热门')
    summary=models.CharField(max_length=500,verbose_name='内容摘要',default='')
    content=MDTextField(verbose_name='内容')
    viewsCount= models.IntegerField(default=0, verbose_name="查看数")
    commentsCount=models.IntegerField(default=0, verbose_name="评论数")

    def __str__(self):
            return self.title

    class Meta:
        verbose_name = '博客文章'
        verbose_name_plural = '博客文章'

见 content=MDTextField(verbose_name='内容') 表示博客文章的内容是MDTextField

7、向 admin.py 中注册model:

from django.contrib import admin
from blog.models import *
# Register your models here.
@admin.register(BlogPost)
class BlogPostAdmin(admin.ModelAdmin):
    list_display = ['title','category','isTop','isHot']

8、迁移创建数据表

运行 python manage.py makemigrations 和 python manage.py migrate 来创建你的model 数据库表，可以看到默认创建的content字段是longtext类型的

9、测试验证

启动应用，访问http://127.0.0.1:8000/admin/ 点击新增博客文章，可以看到内容字段是markdown编辑器输入了。

至此django应用中就可以使用markdown编辑器了。

二、markdown上传图片不回显避坑

按照以上步骤配置django-mdeditor,markdown编辑器可以正常使用，但是这里有个大坑，就是有些浏览器在上传图片后上传的图片不回显！我就碰到了这样的情况。

上传图片后上传的图片不回显

在添加图片界面选择本地上传图片后发现后台接口调到了 /mdeditor/uploads/?guid=1657867564930 接口并且返回了200，但是上传的图片地址不回显，提交报“错误：图片地址不能为空。” 这就奇了怪了。打开浏览器的调试工具，发现报了一个错，Uncaught SyntaxError: Unexpected token 下 in JSON at position 141

浏览器的调试工具，发现报了一个错

点击详情，具体应该是获取的JSON无法解析。

JSON无法解析

这个JSON为什么无法解析呢？开始进一步调试，这个JSON是上传时调用的后台上传方法返回的。所以来看看是不是后台上传接口返回的JSON串有什么问题。找到/mdeditor/uploads路由所对应的源码

/mdeditor/uploads路由所对应的源码

UploadView的源代码，就是返回一个成功的json报文

return JsonResponse({'success': 1,
                     'message': "上传成功！",
                     'url': os.path.join(settings.MEDIA_URL,
                                         MDEDITOR_CONFIGS['image_folder'],
                                         file_full_name)})