十 【用django2.0來開發】給django增加markdown文本編輯器
前面的文章一直都是在介紹django最常見的一些用法, 這一章放鬆一下, 學習一個django的小模塊
目的是如果大家以後在使用別的django的插件模塊或者編寫django的插件模塊時, 也和這個插件的方法是一樣的。
當時讓大家做的文章管理, 文章內容欄位只是一個普通的textarea框, 今天我們就把這個文本框變成一個markdown的富文本編輯器。
這個編輯器的GitHub地址:https://github.com/agusmakmun/django-markdown-editor
項目demo地址:
https://gitee.com/ccnv07/django_example安裝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推薦閱讀: