漂亮的 Django Markdown 富文本 app 插件

時間 2019-11-11

標籤漂亮 django markdown 文本 app 插件欄目 Python 简体版

原文原文鏈接

django-mdeditor

Github地址:https://github.com/pylixm/django-mdeditor 歡迎試用，star收藏！javascript

Django-mdeditor 是基於 Editor.md 的一個 django Markdown 文本編輯插件應用。css

Django-mdeditor 的靈感參考自偉大的項目 django-ckeditor.html

功能

支持 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 目錄，用於存放上傳的圖片。java

在你項目的根 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後臺，點擊 '添加'操做，你會看到以下界面。

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

用法說明

在model 中使用 Markdown 編輯字段

在model 中使用 Markdown 編輯字段，咱們只須要將 model 的TextField 替換成MDTextField 便可。git

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

class ExampleModel(models.Model):
    name = models.CharField(max_length=10)
    content = MDTextField()

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

在前端 template 中使用時，能夠這樣用：web

{% 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  # 是否開啓序列圖功能
}