django markdown组件mdeditor
1.下载
pip install django-mdeditor
下载editor.md:官网下载地址
下载解压后,新建一个js目录,把这些文件目录移进去,还有一个jquery需要自己下载放进去。
![](/media/upload/c7987f5cedf149efa8ca0b2a50fa4c9c.png)
![](/media/upload/51525e7ee3fd448f85e4995997599869.png)
把文件名改为mdeditor放到static目录下
![](/media/upload/aeeeb70107834f5ba0a0403edafa030b.png)
2.环境配置
在 settings 配置文件 INSTALLED_APPS 中添加 mdeditor
INSTALLED_APPS = [
...
'mdeditor',
]
# mmodels.py
class Blog(models.Model):
"""
文章内容
"""
title = models.CharField(verbose_name='标题', max_length=100)
content = models.TextField(verbose_name='正文', default='')
# content = MDTextField(verbose_name='正文',default=' ')
如果需要md编辑的字段不是MDTextField 的类型,需要去admin使用小组件。
# admin.py
class BlogAdmin(admin.ModelAdmin):
formfield_overrides = {
db_model.TextField: {'widget': MDEditorWidget} # TextField字段使用md组件
其他的同理
}
如果是MDTextField 类型,直接去后台编辑页应该就能看到效果了。
![](/media/upload/ae9bd1c8fea946a694ae5b7554cbab88.png)
如果编辑框没变化,或者编辑不了,打开控制台看下,一般是需要的js或者css资源没找到。
3.图片上传
image_folde 和 MEDTA_ROOT 按自己的实际情况改。
# setting.py
MEDTA_ROOT = os.path.join(BASE_DIR, 'media/')
MEDIA_URL = "/media/"
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': 'media/upload', # 图片保存文件夹名称
'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 # 行号
}
}
urls.py
urlpatterns = [
re_path(r"^media/(?P<path>.*)$", serve, {"document_root": settings.MEDTA_ROOT}, name="media"),
re_path(r'^static/(?P<path>.*)$', serve, {'document_root': settings.STATIC_ROOT}),
# url(r'mdeditor/', include('mdeditor.urls')) # 自带的视图 处理文件上传
path(r'mdeditor/uploads/', views.upload_file) # 自己写的视图 url一定要是这个 mdeditor/uploads/
]
自带的处理图片上传的视图,保存的文件名带有上传时本地的文件名。
![](/media/upload/eb58930f53c14ae389656aae98feeaba.png)
就加了个时间,我觉得不太好,所以自己写一个处理图片上传的视图。
![](/media/upload/c90ff4c3abdc460ca8a7d485ea10ac56.png)
原来的视图是这么写的,稍微改一下。
# views.py
@csrf_exempt
def upload_file(request):
""" 编辑器上传文件处理 """
upload = request.FILES.get('editormd-image-file') # 获取传的文件
uid = str(uuid.uuid4()).replace('-', '') # 生成uuid
file_name = uid + '.' + str(upload.name).split('.')[-1] # 文件名 + 文件格式
file_path = os.path.join(settings.MEDTA_ROOT, 'upload', file_name) # 拼接文件路径
print(file_path)
with open(file_path, 'wb+') as f:
for chunk in upload.chunks(): # 写入
f.write(chunk)
# 按要求返回数据
result = {
"url": settings.MEDIA_URL + "upload/" + file_name,
"message": "上传成功!",
"success": 1,
}
return JsonResponse(result)
![](/media/upload/d047809ed68a4c5cbc39e180346f4f7e.png)
大功告成,这样文件就变成uuid了,不会暴露本地的文件名。
之前用的是ckeditor5,比这个功能多,支持截图粘贴上传文件,但是不能实时预览以及移动端使用体验不好。
如果文章对你有帮助!可点击按钮打赏哦 ~
发表评论
共 0 条评论
暂无评论