開発部の「エイジ」です。
★関連記事
今回はDjangoへWYSIWYGエディターをformに反映したいと思います。
完成すると下記のようなフォームが表示されます。
環境
Django v3.1
Python v3.6.5
WYSIWYG editorとは
【読み方】 ウィジウィグエディター
WYSIWYGとは、見たままのものを実際に作成出力するという言葉のWhat You See Is What You Getの頭文字をとったものであり、WYSIWYGエディターとは編集中の画面に表示されるものと同じものが、最終結果（HTML、印刷結果等）として得られるようなアプリケーションのこと。
モデルの作成
Postモデルを作成します。
WYSIWYGエディターはTextFieldでないと表示されません。
|
1 2 3 4 |
class Post(models.Model): text = models.TextField(blank=True, null=True) |
マイグレーションします。
|
1 2 3 4 |
# python manage.py makemigrations # python manage.py migrate |
モデルとsummernoteを紐付けます。
まずはforms.pyを作成しその中で紐付けます。
|
1 2 3 |
# touch forms.py |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
from django import forms from xxx.models import * from django_summernote.widgets import SummernoteWidget, SummernoteInplaceWidget class postForm(forms.ModelForm): classMeta: model = Post fields = '__all__' widgets = { 'text': SummernoteWidget() } |
これで紐付きました。次にはviews.pyにformを指定します。
Views側でformを呼び込む
form = postFormと書きそれをparamsでテンプレート側に送ります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
# モデル from xxx.models import * # form from django import forms from .forms import * class sample(View): def get(self,request): form = postForm params = { 'form': form } return render(request,'xxx.html',params) |
次にformを表示させたいと思います。
テンプレートに描画
|
1 2 3 4 5 6 7 |
<form action="/your-name/" method="post"> {% csrf_token %} {{ form }} <input type="submit" value="Submit"> </form> |
これで無事に表示されますが、複数あるカラム名を指定し個別に表示する方法を推奨します。
|
1 2 3 4 5 6 7 |
<form action="/your-name/" method="post"> {% csrf_token %} {{ form.text }} <input type="submit" value="Submit"> </form> |
これで無事に表示されます。
次に表示されたエディタを設定します。
SUMMERNOTE_CONFIGの追加
下記のリンクを参照にしてください。表示幅や表示するボタンの量などが変更できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
SUMMERNOTE_CONFIG = { 'iframe': True, 'iframe': True, 'summernote': { 'width': '100%', 'height': '300', }, 'toolbar': [ ['font', ['bold', 'underline', 'clear']], ['para', ['ul', 'ol', 'paragraph']], ], } |
上記の設定だと下記のようなエディタになります。
文字の表示
エディターはHTMLタグごと保存しているので
表示する場合はautoescapeさせなければいけません
|
1 2 3 4 5 |
{% autoescape off %} <p>{{post.text}}</p> {% endautoescape %} |
このように囲わないとHTMLタグがそのまま文字列で表示されてしまいます。
しかしautoescapeさせると改行もされ表示されます。
以上になります。最後までお読みいただきありがとうございました。
このブログは株式会社CoLabMixによる技術ブログです。
GCP、AWSなどでのインフラ構築・運用や、クローリング・分析・検索などを主体とした開発を行なっています。
Ruby on RailsやDjango、Pythonなどの開発依頼などお気軽にお声がけください。
開発パートナーを増やしたいという企業と積極的に繋がっていきたいです。
