前面的文章一直都是在介紹django最常見的一些用法, 這一章放鬆一下, 學習一個django的小模塊

目的是如果大家以後在使用別的django的插件模塊或者編寫django的插件模塊時, 也和這個插件的方法是一樣的。

當時讓大家做的文章管理, 文章內容欄位只是一個普通的textarea框, 今天我們就把這個文本框變成一個markdown的富文本編輯器。

這個編輯器的GitHub地址:github.com/agusmakmun/d

項目demo地址:

https://gitee.com/ccnv07/django_example?

gitee.com

安裝django-markdown-editor

pip install martor

載入到INSTALLED_APPS

# cms/settings.py
INSTALLED_APPS = [
....
martor,
]

添加url路由

# cms/urls.py
# django >= 2.0
urlpatterns = [
...
path(martor/, include(martor.urls)),
]

# django <= 1.9
urlpatterns = [
...
url(r^martor/, include(martor.urls)),
]

修改Django配置項以支持django-markdown-editor

# cms/settings.py
STATIC_URL = /static/
# STATICFILES_DIRS = (static, )
STATIC_ROOT = /static

MEDIA_URL = /media/
MEDIA_ROOT = BASE_DIR + /media

STATIC_ROOT 指定static的目錄

MEDIA_URL 是指定媒體資源訪問路徑, 因為我們上傳以後的文件需要通過這個路徑訪問, 所以必須指定

MEDIA_ROOT 指定媒體資源的路徑

注意!

MEDIA_URL 是需要在urls.py中指定訪問路徑的re_path(r^media/(?P<path>.*)$, serve, {document_root:settings.MEDIA_ROOT}),

遷移django-markdown-editor的靜態文件到項目的static中

python manage.py collectstatic

添加django-markdown-editor的配置到項目配置中

# cms/settings.py
# Global martor settings
# Input: string boolean, `true/false`
MARTOR_ENABLE_CONFIGS = {
imgur: true, # to enable/disable imgur/custom uploader.
mention: false, # to enable/disable mention
jquery: true, # to include/revoke jquery (require for admin default django)
living: false, # to enable/disable live updates in preview
}

# To setup the martor editor with label or not (default is False)
MARTOR_ENABLE_LABEL = False

# Imgur API Keys
MARTOR_IMGUR_CLIENT_ID = your-client-id
MARTOR_IMGUR_API_KEY = your-api-key

# Safe Mode
MARTOR_MARKDOWN_SAFE_MODE = True # default

# Markdownify
MARTOR_MARKDOWNIFY_FUNCTION = martor.utils.markdownify # default
MARTOR_MARKDOWNIFY_URL = /martor/markdownify/ # default

# Markdown extensions (default)
MARTOR_MARKDOWN_EXTENSIONS = [
markdown.extensions.extra,
markdown.extensions.nl2br,
markdown.extensions.smarty,
markdown.extensions.fenced_code,

# Custom markdown extensions.
martor.extensions.urlize,
martor.extensions.del_ins, # ~~strikethrough~~ and ++underscores++
martor.extensions.mention, # to parse markdown mention
martor.extensions.emoji, # to parse markdown emoji
martor.extensions.mdx_video, # to parse embed/iframe video
]

# Markdown Extensions Configs
MARTOR_MARKDOWN_EXTENSION_CONFIGS = {}

# Markdown urls
MARTOR_UPLOAD_URL = /martor/uploader/ # default
MARTOR_SEARCH_USERS_URL = /martor/search-user/ # default

# Markdown Extensions
MARTOR_MARKDOWN_BASE_EMOJI_URL = https://assets-cdn.github.com/images/icons/emoji/ # default
MARTOR_MARKDOWN_BASE_MENTION_URL = https://python.web.id/author/ # default (change this)

CSRF_COOKIE_HTTPONLY = False

使用django-markdown-editor

打開article/forms.py文件

# article/forms.py
from martor.fields import MartorFormField
class ArticleForm(forms.ModelForm):
...忽略代碼
content = MartorFormField()

然後打開訪問後臺查看效果

?

在Model和Admin中使用django-markdown-editor

# models.py
from django.db import models
from martor.models import MartorField

class Post(models.Model):
description = MartorField()

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

from martor.widgets import AdminMartorWidget

from yourapp.models import YourModel

class YourModelAdmin(admin.ModelAdmin):
formfield_overrides = {
models.TextField: {widget: AdminMartorWidget},
}

admin.site.register(YourModel, YourModelAdmin)

提示KeyError: configs錯誤

這個錯誤是python的markdown模塊版本的問題, 卸載掉當前版本, 換成2.6.11版本即可

pipenv uninstall markdown
pipenv install markdown==2.6.11

修改django-markdown-editor為本地上傳圖片

修改本地上傳的配置

# cms/settings.py
MARTOR_UPLOAD_PATH = uploads/images/{}.format(time.strftime("%Y%m%d/"))
MARTOR_UPLOAD_URL = /api/uploader/ # change to local uploader
MAX_IMAGE_UPLOAD_SIZE = 5242880 # 5MB

MARTOR_UPLOAD_PATH 指定上傳的保存文件路徑

MARTOR_UPLOAD_URL 指定上傳的url

MAX_IMAGE_UPLOAD_SIZE 指定上傳文件的最大大小

編寫上傳的邏輯代碼

# article/views.py
import os
import json
import uuid

from django.conf import settings
from django.http import HttpResponse
from django.utils.translation import ugettext_lazy as _
from django.contrib.auth.decorators import login_required
from django.core.files.storage import default_storage
from django.core.files.base import ContentFile

from martor.utils import LazyEncoder

@login_required
def markdown_uploader(request):
"""
Makdown image upload for locale storage
and represent as json to markdown editor.
"""
if request.method == POST and request.is_ajax():
if markdown-image-upload in request.FILES:
image = request.FILES[markdown-image-upload]
image_types = [
image/png, image/jpg,
image/jpeg, image/pjpeg, image/gif
]
if image.content_type not in image_types:
data = json.dumps({
status: 405,
error: _(Bad image format.)
}, cls=LazyEncoder)
return HttpResponse(
data, content_type=application/json, status=405)

if image._size > settings.MAX_IMAGE_UPLOAD_SIZE:
to_MB = settings.MAX_IMAGE_UPLOAD_SIZE / (1024 * 1024)
data = json.dumps({
status: 405,
error: _(Maximum image file is %(size) MB.) % {size: to_MB}
}, cls=LazyEncoder)
return HttpResponse(
data, content_type=application/json, status=405)

img_uuid = "{0}-{1}".format(uuid.uuid4().hex[:10], image.name.replace( , -))
tmp_file = os.path.join(settings.MARTOR_UPLOAD_PATH, img_uuid)
def_path = default_storage.save(tmp_file, ContentFile(image.read()))
img_url = os.path.join(settings.MEDIA_URL, def_path)

data = json.dumps({
status: 200,
link: img_url,
name: image.name
})
return HttpResponse(data, content_type=application/json)
return HttpResponse(_(Invalid request!))
return HttpResponse(_(Invalid request!))

將上傳的url添加到url路由中

# cms/settings.py
from article.views import markdown_uploader

urlpatterns = [
....
re_path(
r^api/uploader/$,
markdown_uploader, name=markdown_uploader_page
),
]

然後打開瀏覽器測試, 就可以看到上傳圖片成功了

?

整個教程完成後基本也算了解Django並且入門了。祝願大家在最短的時間內入門Django, 精通Python

如果你在學習中有疑問需要解答, 可以加我微信:18500402623
推薦閱讀：
相關文章