github的地址:https://github.com/pylixm/django-mdeditor
- 安装
pip install django-mdeditor
- 在项目settings.py文件中的INSTALLED_APPS中添加 ‘mdeditor’
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'mdeditor', # 富文本编辑器mdeditor
]
- 添加MEDIA的相关配置,在settings.py文件中添加
MEDIA_ROOT = os.path.join(BASE_DIR,'uploads') # mdeditor编辑器上传图片之后存放的文件夹
MEDIA_URL = '/media/'
如果按照上面的配置,那么最后mdeditor上传的图片就会上传到:项目根目录(BASE_DIR)/uploads/editor
文件夹下面
- 添加设置到我们的url中,及修改主urls.py文件
from django.conf.urls import url, include
from django.conf.urls.static import static
from django.conf import settings
from django.contrib import admin
from django.urls import path
urlpatterns = [
path('admin/',admin.site.urls),
path('mdeditor/', include('mdeditor.urls')),
]
if settings.DEBUG:
# static files (images, css, javascript, etc.)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
到现在为止,我们的配置过程就好了,然后我们既可以开始使用了
- 添加一个app,
blog
python manage.py startapp blog
然后我们在blog下的models.py文件中写入一个Blog模型
from django.db import models
from mdeditor.fields import MDTextField # 导入这个字段
# Create your models here.
class Blog(models.Model):
title = models.CharField(max_length=100)
content = MDTextField()
然后执行下面两条命令,将模型映射到数据库中区
python manage.py makemigrations
python manage.py migrate
- 然后我们注册到django中,在blog/admin.py中写入
from django.contrib import admin
# Register your models here.
from . import models
admin.site.register(models.Blog)
- 查看效果
到这一步,我们就可以进入django自带的admin后台查看前面我们的成果了,我们点击增加Blog
按钮,就能够进入编辑界面,看到我们的编辑器了
这个时候,我们已经将markdown编辑器整合到admin后台中了,但是我们并不能在我们自己的html文件中显示这个编辑器。接下来我们来在自己的html文件中显示mdeditor
编辑器.。
- 在自定义的html文件中显示mdeditor编辑器
首先我们新建一个视图,在blog/views.py文件中写入代码
from django.shortcuts import render
from mdeditor.fields import MDTextFormField
from django import forms
from django.views.generic import View
# Create your views here.
class BlogForm(forms.Form):
content = MDTextFormField()
class Blog(View):
def get(self,request):
form = BlogForm()
return render(request,'blog.html',{'form':form})
然后再主urls.py文件中添加url
from Blog.views import Blog
urlpatterns = [
path('admin/',admin.site.urls),
path('mdeditor/', include('mdeditor.urls')),
path('blog/',Blog.as_view())
]
然后我们新建一个blog.html
文件,放再根目录下的templates
文件夹下面
写入以下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blog</title>
{{ form.media }}
</head>
<body>
<div class="editor">
<form action="" method="post">
{% csrf_token %}
<label for="title">标题:</label>
<input name="title" type="text" id="title"><br>
{{ form.as_p }}
<input type="submit" value="提交">
</form>
</div>
</body>
</html>
这样,我们输入url就能看到mdeditor编辑器了
至此,我们已经能在任何地方显示我们的编辑器了,那么我们怎样将得到的内容显示在前台呢
- 显示内容到前端页面
首先安装markdown
pip install markdown
然后我们先完善我们的Blog这个类视图,然后添加一个显示blog详情的视图,编辑blog/views.py文件
from django.shortcuts import render
from mdeditor.fields import MDTextFormField
from django import forms
from django.views.generic import View
from Blog.models import Blog
from django.shortcuts import HttpResponse
import markdown
# Create your views here.
class BlogForm(forms.Form):
content = MDTextFormField()
class Blog(View):
def get(self,request):
form = BlogForm()
return render(request,'blog.html',{'form':form})
def post(self,request):
title = request.POST.get('title')
content = request.POST.get('content')
Blog.objects.create(title=title,content=content)
return HttpResponse('success')
def blog_detail(request,blog_id):
try:
blog = Blog.objects.get(pk=int(blog_id))
except:
return HttpResponse('该blog不存在')
blog.content = markdown.markdown(blog.content,extensions=[
'markdown.extensions.extra',
'markdown.extensions.codehilite',
'markdown.extensions.toc',
])
return render(request,'detail.html',{'blog':blog})
然后配置显示blog详细信息的url,在主urls.py文件中添加url
from Blog.views import Blog,blog_detail
urlpatterns = [
path('admin/',admin.site.urls),
path('mdeditor/', include('mdeditor.urls')),
path('blog/',Blog.as_view())
path('blog_detail/<int:blog_id>',blog_detail)
]
这样,我们就完善好了我们的mdeditor编辑器,并且能将内容存取到数据库中去
首先我们先自己编写一点内容做测试,使用admin后台的编辑器或者我们自己blog.html
页面的编辑器都可以
然后提交。
然后我们就可以输入url来看到我们的blog详情页面了
例如输入 127.0.0.1:8000/blog_detail/1/
但是,如果我们blog中的content中有代码的话,在页面显示并没有高亮,这个时候我们就还需要想做一些事情了。
- 代码内容显示高亮
我们首先需要安装Pygments
,然后激活虚拟环境。
安装
pip install Pygments
激活虚拟环境
pygmentize -S default -f html -a .codehilite > code.css
然后我们就会发现生成了一个code.css文件,将这个css文件加入到我们的static文件夹下面(路径无所谓,只需要自己引用正确就可以了)
然后我们在detail.html
文件中导入这个文件
{% load static %}
<link rel="stylesheet" href="{% static 'code.css' %}">
我们在前面的markdown下也必须加入markdown.extensions.codehilite
,在前面我们已经添加了。
然后我们刷新页面,我们blog中代码部分也会高亮显示了。
至此,我们django整合markdown语法并显示高亮也已经整合完毕了
最后,django-mdeditor也提供了一个接口,允许我们做一些配置。
我们只需要在settings.py文件中写入MDEDITOR_CONFIGS
这个变量就行了。
默认的MDEDITOR_CONFIGS
配置如下
英语为官网给的注释,汉字为我自己的理解。
MDEDITOR_CONFIGS = {
'default':{
'width': '90% ', # Custom edit box width 宽度,整个页面的百分之多少
'heigth': 500, # Custom edit box height 高度,单位为px
'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"], # custom edit box toolbar 工具栏
'upload_image_formats': ["jpg", "jpeg", "gif", "png", "bmp", "webp"], # image upload format type 允许上传的图片 的格式,不在这个里面的格式将不允许被上传
'image_floder': 'editor', # image save the folder name 上传图片后存放的目录,BASE_DIR/MEDIA_ROOT/editor
'theme': 'default', # edit box theme, dark / default mdeditor主题,dark/default两种
'preview_theme': 'default', # Preview area theme, dark / default 内容显示区主题 dark/default
'editor_theme': 'default', # edit area theme, pastel-on-dark / default 文本编辑区主题 pastel-on-dark / default
'toolbar_autofixed': True, # Whether the toolbar capitals
'search_replace': True, # Whether to open the search for replacement 是否打开搜索替换
'emoji': True, # whether to open the expression function 是否允许使用emoji表情
'tex': True, # whether to open the tex chart function 是否打开tex图表功能
'flow_chart': True, # whether to open the flow chart function 是否打开流程图功能
'sequence': True # Whether to open the sequence diagram function 是否打开序列图函数
}
}
参考链接: