一、安装markdown插件
pip install django-mdeditor
pip install markdown
二、在 settings 配置文件 INSTALLED_APPS 中添加 mdeditor:
INSTALLED_APPS = [
...
'mdeditor',
]
三、插入图片没有地址，针对django3.0+修改 frame 配置，settings.py设置如下：
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:
我的django版本是4.2.5，设置如下
from django.conf import settings
from django.urls import include
from django.conf.urls.static import static
...
urlpatterns = [
...
path("mdeditor/", include('mdeditor.urls')),
]
# 配置静态文件，这个很重要，不然上传的图片和文件无法被访问到，必须要引入blog/settings里面的debug，因为globle的debug是False
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)+ static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
六、编写一个测试demo—model:
from django.db import models
from mdeditor.fields import MDTextField
class Content(models.Model):
"""文章"""
title = models.CharField(max_length=100)
content = MDTextField()
create_time = models.DateTimeField(auto_now_add=True)
update_time = models.DateTimeField(auto_now=True)
class Meta:
db_table = '文章'
verbose_name = '文章'
verbose_name_plural = '文章'
ordering = ['-create_time']
def __str__(self):
return self.title
七、向admin中注册model
from django.contrib import admin
from markdownx.admin import MarkdownxModelAdmin
from .models import Content
class ContentAdmin(MarkdownxModelAdmin):
# 显示哪些字段
list_display = ('id', 'title', 'create_time', 'update_time')
# 排序字段
ordering = ("-create_time",)
# 显示哪些字段可以点击跳转
list_display_links = ("id", "title")
# 搜索字段
search_fields = ("title", "content")
# 设置每页显示多少条数据
list_per_page = 15
admin.site.register(Content, ContentAdmin)
八、创建好Django admin 超级管理员账号python manage.py createsuperuser
然后运行 python manage.py makemigrations 和 python manage.py migrate 来创建你的model 数据库表.
登录 django admin后台，点击 '添加'操作，你会看到如下界面。
九、在前端中使用Markdown 编辑器，首先创建ModelForm类
from app.models import Content
from django.forms import ModelForm
from django import forms
class MDEditorModleForm(forms.ModelForm):
class Meta:
model = Content
fields = '__all__'
def add(request):
forms = MDEditorModleForm()
if request.method == 'POST':
forms = MDEditorModleForm(request.POST)
if forms.is_valid():
forms.save()
return redirect('/index')
else:
print(forms.errors)
return render(request, 'add.html', {'forms': forms})
前端代码：
{% load static %}
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>添加文章</title>
</head>
<body>
<h3>添加文章</h3>
<form method="post">
{% csrf_token %}
{{ forms.media }}
{{ forms.as_p }}
<p><input type="submit" value="立即保存"></p>
</form>
</body>
</html>
运行效果：
