Django 可以使用 Markdown 作为文本编辑器吗？
当然可以，Markdown 语法简单，可以在本地任意编辑器里面修改，不会像 富文本编辑器 兼容性差。
Django 怎样使用 Markdown 编辑器呢?
安装
pip
install django-mdeditor
在 settings 配置文件 INSTALLED_APPS 中添加 mdeditor:
INSTALLED_APPS
= [
...
'mdeditor',
]
针对django3.0+修改 frame 配置，如下：
X_FRAME_OPTIONS
= 'SAMEORIGIN'
在 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
:
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',
'preview_theme': 'default',
'editor_theme': 'default',
'toolbar_autofixed': True,
'search_replace': True,
'emoji': True,
'tex': True,
'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 () {
editormd.markdownToHTML("content", {
emoji : true,
taskList : true,
tex : true,
flowChart : true,
sequenceDiagram : true,
});
$(".reference-link").each(function (i,obj) {
console.log(obj)
})
})
</script>
</body>
</html>
