漂亮的 Django Markdown 富文字 app 外掛

DeanWu發表於2018-03-05
DjangoAPP

django-mdeditor

Github地址:github.com/pylixm/djan… 歡迎試用，star收藏！

Django-mdeditor 是基於 Editor.md 的一個 django Markdown 文字編輯外掛應用。

Django-mdeditor 的靈感參考自偉大的專案 django-ckeditor.

功能

  • 支援 Editor.md 大部分功能
    • 支援標準的Markdown 文字、 CommonMark 和 GFM (GitHub Flavored Markdown) 文字;
    • 支援實時預覽、圖片上傳、格式化程式碼、搜尋替換、皮膚、多語言等。
    • 支援TOC 目錄和表情；
    • 支援 TeX, 流程圖、時序圖等圖表擴充套件。
  • 可自定義 Editor.md 工具欄。
  • 提供了 MDTextField 欄位用來支援模型欄位使用。
  • 提供了 MDTextFormField 欄位用來支援 Form 和 ModelForm.
  • 提供了 MDEditorWidget 欄位用來支援 admin 自定義樣式使用。

快速入門

  • 安裝
    pip install django-mdeditor
複製程式碼
  • 在 settings 配置檔案 INSTALLED_APPS 中新增 mdeditor:
    INSTALLED_APPS = [
        ...
        'mdeditor',
    ]
複製程式碼
  • 在 settings 中新增媒體檔案的路徑配置:
MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads')
MEDIA_URL = '/media/'

複製程式碼

在你專案根目錄下建立 uploads/editor 目錄，用於存放上傳的圖片。

  • 在你專案的根 urls.py 中新增擴充套件url和媒體檔案url:
from django.conf.urls import url, include
from django.conf.urls.static import static
from django.conf import settings
...

urlpatterns = [
    ...
    url(r'mdeditor/', include('mdeditor.urls'))
]

if settings.DEBUG:
    # static files (images, css, javascript, etc.)
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

複製程式碼
  • 編寫一個測試 model :
from django.db import models
from mdeditor.fields import MDTextField

class ExampleModel(models.Model):
    name = models.CharField(max_length=10)
    content = MDTextField()
複製程式碼
  • 向 admin.py 中註冊model:
from django.contrib import admin
from . import models

admin.site.register(models.ExampleModel)

複製程式碼

  • 執行 python manage.py makemigrations 和 python manage.py migrate 來建立你的model 資料庫表.

  • 登入 django admin後臺，點選 '新增'操作，你會看到如下介面。

漂亮的 Django Markdown 富文字 app 外掛

到此，你已經初步體驗了 djang-mdeditor ，接下來詳細看下他的其他使用吧。

用法說明

在model 中使用 Markdown 編輯欄位

在model 中使用 Markdown 編輯欄位，我們只需要將 model 的TextField 替換成MDTextField 即可。

from django.db import models
from mdeditor.fields import MDTextField

class ExampleModel(models.Model):
    name = models.CharField(max_length=10)
    content = MDTextField()
複製程式碼

在後臺admin中，會自動顯示 markdown 的編輯富文字。

在前端 template 中使用時，可以這樣用：

{% load staticfiles %}
<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    </head>
    <body>
        <form method="post" action="./">
            {% csrf_token %}
            {{ form.media }}
            {{ form.as_p }}
            <p><input type="submit" value="post"></p>
        </form>
    </body>
</html>

複製程式碼

在 Form 中使用 markdown 編輯欄位

在 Form 中使用 markdown 編輯欄位，使用 MDTextFormField 代替 forms.CharField, 如下：

from mdeditor.fields import MDTextFormField

class MDEditorForm(forms.Form):
    name = forms.CharField()
    content = MDTextFormField()
複製程式碼

ModelForm 可自動將model 對應的欄位轉為 form欄位， 可正常使用：

class MDEditorModleForm(forms.ModelForm):

    class Meta:
        model = ExampleModel
        fields = '__all__'
複製程式碼

在 admin 中使用 markdown 小元件

在 admin 中使用 markdown 小元件，如下：

from django.contrib import admin
from django.db import models

# Register your models here.
from . import models as demo_models
from mdeditor.widgets import MDEditorWidget


class ExampleModelAdmin(admin.ModelAdmin):
    formfield_overrides = {
        models.TextField: {'widget': MDEditorWidget}
    }


admin.site.register(demo_models.ExampleModel, ExampleModelAdmin)
複製程式碼

自定義工具欄

在 settings 中增加如下配置 ：

MDEDITOR_CONFIGS = {
    '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_floder': 'editor',  # 圖片儲存資料夾名稱
    '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  # 是否開啟序列圖功能
}
複製程式碼

參考

相關文章