概要
djangoを使ってブログを書こうとしていろいろ模索していたところ、めちゃくちゃ簡単にQiitaと同じようにブログを書く方法を見つけたので、そのことについて書いていきます。
Adminにログインすると、以下の図のようなテキストフィールドが現れるようになります。
環境
Django=2.2.5
python=3.8.2
PC : mac(catalina)
使用するパッケージ
今回は、django-mdeditorを使います。
パッケージのインストール
pip install django-mdeditor
または
pipenv install django-mdeditor
でインストールします。
settings.py の変更
settings.pyのなかのINSTALLED_APPS に'mdeditor'を追加します。
INSTALLED_APPS = [
...
'mdeditor',
]
django3 以上を使っている場合はフレーム設定を追加します。
X_FRAME_OPTIONS = 'SAMEORIGIN'
mediaURLを追加していない場合は追加してください。
MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads')
MEDIA_URL = '/media/'
urls.pyの設定
urlpatternsにメディアを追加します。
from django.conf.urls import url, include
from django.conf.urls.static import static
from django.conf import settings
...
urlpatterns = [
...
]
if settings.DEBUG:
# static files (images, css, javascript, etc.)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
モデルの作成
次に簡単なモデルを作成します。
from django.db import models
from mdeditor.fields import MDTextField
class Article(models.Model):
title = models.CharField(max_length=200)
body = MDTextField()
def __str__(self):
return self.title
作成したら、python manage.py makemigrations と python manage.py migrate を順に実行してください。
これでモデルの作成は完了です。
Adminにログインすると、以下の図のようなテキストフィールドが現れるようになります。
formで表示する場合
アプリ内のform.pyに次のようなformを作成します。
app-name/forms.py
class MDEditorModleForm (forms.ModelForm):
class Meta:
model = Article
fields = '__all__'
最後にテンプレートファイルとして次を追加します。
{% load static%}
<! DOCTYPE html>
<html lang = "en">
<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>
これでweb上でも同じようなテキストフィールドを表示できるようになります。
ツールバーの変更
以下をsettings.pyに追加して、ツールバーを変更することができます。
MDEDITOR_CONFIGS = {
'default':{
'width': '90% ', # Custom edit box width
'heigth': 500, # Custom edit box height
'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_folder': 'editor', # image save the folder name
'theme': 'default', # edit box theme, dark / default
'preview_theme': 'default', # Preview area theme, dark / default
'editor_theme': 'default', # edit area theme, 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
'tex': True, # whether to open the tex chart function
'flow_chart': True, # whether to open the flow chart function
'sequence': True, # Whether to open the sequence diagram function
'watch': True, # Live preview
'lineWrapping': False, # lineWrapping
'lineNumbers': False # lineNumbers
}
}