Django 使用 Markdown 编辑器

最新推荐文章于 2023-08-23 18:03:00 发布

垂金烟柳

最新推荐文章于 2023-08-23 18:03:00 发布

阅读量1.1k

点赞数

分类专栏： python 文章标签： django markdown

本文链接：https://blog.csdn.net/weixin_44316575/article/details/108945466

版权

python 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

Django 可以使用 Markdown 作为文本编辑器吗？

当然可以，Markdown 语法简单，可以在本地任意编辑器里面修改，不会像 富文本编辑器 兼容性差。

Django 怎样使用 Markdown 编辑器呢?

安装

pip install django-mdeditor

在 settings 配置文件 INSTALLED_APPS 中添加 mdeditor:

    INSTALLED_APPS = [
        ...
        'mdeditor',
    ]

针对django3.0+修改 frame 配置，如下：

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

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

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

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

在你项目的根 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)

向 admin.py 中注册model:

from django.contrib import admin
from . import models

admin.site.register(models.ExampleModel)

运行 python manage.py makemigrations 和 python manage.py migrate 来创建你的model 数据库表.
登录 django admin后台，点击 '添加’操作,你会看到如下界面

Markdown 编辑器怎么使用呢？

在model 中使用 Markdown 编辑字段

在model 中使用 Markdown 编辑字段，我们只需要将 model 的TextField 替换成MDTextField 即可。

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

class ExampleModel(models.Model):
    name = models.CharField(max_length=10)
    content = MDTextField()

在后台admin中，会自动显示 markdown 的编辑富文本

自定义工具栏

在 settings 中增加如下配置

MDEDITOR_CONFIGS = {
'default':{
    'width': '90%',  # 自定义编辑框宽度
    'heigth': 500,   # 自定义编辑框高度
    'toolbar': ["undo", "redo", "|",
                "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|",
                "h1", "h2", "h3", "h5", "h6", "|",
                "list-ul", "list-ol", "hr", "|",
                "link", "reference-link", "image", "code", "preformatted-text", "code-block", "table", "datetime",
                "emoji", "html-entities", "pagebreak", "goto-line", "|",
                "help", "info",
                "||", "preview", "watch", "fullscreen"],  # 自定义编辑框工具栏
    'upload_image_formats': ["jpg", "jpeg", "gif", "png", "bmp", "webp"],  # 图片上传格式类型
    'image_folder': 'editor',  # 图片保存文件夹名称
    'theme': 'default',  # 编辑框主题 ，dark / default
    'preview_theme': 'default',  # 预览区域主题， dark / default
    'editor_theme': 'default',  # edit区域主题，pastel-on-dark / default
    'toolbar_autofixed': True,  # 工具栏是否吸顶
    'search_replace': True,  # 是否开启查找替换
    'emoji': True,  # 是否开启表情功能
    'tex': True,  # 是否开启 tex 图表功能
    'flow_chart': True,  # 是否开启流程图功能
    'sequence': True,  # 是否开启序列图功能
    'watch': True,  # 实时预览
    'lineWrapping': False,  # 自动换行
    'lineNumbers': False  # 行号
    }
}

前端页面渲染

定义视图 views.py

from . import models
from django.shortcuts import render


def Example(request):
	object = models.objects.get(id=1)
	return render(request, 'example.html', K8SContext)

定义一个 URL urls.py

from django.urls import path
from . import views

urlpatterns = [
	path('test/', views.Example)
]

前端页面展示 example.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href="{% static 'mdeditor/css/editormd.min.css' %}" rel="stylesheet">
  <link href="{% static 'mdeditor/css/editormd.preview.css' %}" rel="stylesheet">
</head>
<body>
<div> name: {{ object.name }}</div>
<div> content:
  <div id="content"><textarea>{{ object.content }}</textarea></div>
  {{ object.content_test }}
</div>
  <script src="{% static 'mdeditor/js/jquery.min.js' %}"></script>
  <script src="{% static 'mdeditor/js/editormd.min.js' %}"></script>
  <script src="{% static 'mdeditor/js/lib/marked.min.js' %}"></script>
  <script src="{% static 'mdeditor/js/lib/prettify.min.js' %}"></script>
  <script src="{% static 'mdeditor/js/lib/raphael.min.js' %}"></script>
  <script src="{% static 'mdeditor/js/lib/underscore.min.js' %}"></script>
  <script src="{% static 'mdeditor/js/lib/sequence-diagram.min.js' %}"></script>
  <script src="{% static 'mdeditor/js/lib/flowchart.min.js' %}"></script>
  <script src="{% static 'mdeditor/js/lib/jquery.flowchart.min.js' %}"></script>
<script>
  $(function () {
      // js 解析markdown
      editormd.markdownToHTML("content", {
          //htmlDecode      : "style,script,iframe",  // you can filter tags decode
          emoji           : true,
          taskList        : true,
          tex             : true,  // 默认不解析
          flowChart       : true,  // 默认不解析
          sequenceDiagram : true,  // 默认不解析
      });

      $(".reference-link").each(function (i,obj) {
        console.log(obj)
      })
  })

</script>
</body>
</html>

在这里插入图片描述

垂金烟柳

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Django 使用 Markdown 编辑器

Django 可以使用 Markdown 作为文本编辑器吗？当然可以，Markdown 语法简单，可以在本地任意编辑器里面修改，不会像富文本编辑器兼容性差。Django 怎样使用 Markdown 编辑器呢?安装pip install django-mdeditor在 settings 配置文件 INSTALLED_APPS 中添加 mdeditor: INSTALLED_APPS = [ ... 'mdeditor', ]
复制链接

扫一扫

专栏目录