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 是否打開序列圖函數
}
}
參考鏈接: