django集成markdown編輯器並實現代碼高亮顯示

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   是否打開序列圖函數
    }
}

參考鏈接:

django集成markdown編輯器並實現代碼高亮顯示

初識flask--啓動flask項目與基本配置

Django源碼閱讀 View.as_view()方法

flask--渲染Jinja模板與傳入模板變量

django源碼閱讀 forms表單驗證部分

django集成markdown編輯器並實現代碼高亮顯示

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結