DjangoへWYSIWYGエディターを導入する手順③ - 株式会社CoLabMix

DjangoへWYSIWYGエディターを導入する手順③

開発部の「エイジ」です。

★関連記事

DjangoへWYSIWYGエディターを導入する手順①

DjangoへWYSIWYGエディターを導入する手順②

 

 

今回はDjangoへWYSIWYGエディターをformに反映したいと思います。

完成すると下記のようなフォームが表示されます。

環境

Django v3.1
Python v3.6.5

WYSIWYG editorとは

【読み方】 ウィジウィグエディター

WYSIWYGとは、見たままのものを実際に作成出力するという言葉のWhat You See Is What You Getの頭文字をとったものであり、WYSIWYGエディターとは編集中の画面に表示されるものと同じものが、最終結果(HTML、印刷結果等)として得られるようなアプリケーションのこと。

WYSIWYGエディター

 

モデルの作成

Postモデルを作成します。

WYSIWYGエディターはTextFieldでないと表示されません。

 

マイグレーションします。

 

モデルとsummernoteを紐付けます。

まずはforms.pyを作成しその中で紐付けます。

 

 

これで紐付きました。次にはviews.pyにformを指定します。

 

 

Views側でformを呼び込む

form = postFormと書きそれをparamsでテンプレート側に送ります。

 

次にformを表示させたいと思います。

 

テンプレートに描画

公式

これで無事に表示されますが、複数あるカラム名を指定し個別に表示する方法を推奨します。

 

 

これで無事に表示されます。

次に表示されたエディタを設定します。

SUMMERNOTE_CONFIGの追加

下記のリンクを参照にしてください。表示幅や表示するボタンの量などが変更できます。

設定

上記の設定だと下記のようなエディタになります。

 

 

 

 

文字の表示

エディターはHTMLタグごと保存しているので

表示する場合はautoescapeさせなければいけません

参考


このように囲わないとHTMLタグがそのまま文字列で表示されてしまいます。

しかしautoescapeさせると改行もされ表示されます。

以上になります。最後までお読みいただきありがとうございました。

 

 

 

 

 

 

 

このブログは株式会社CoLabMixによる技術ブログです。

GCP、AWSなどでのインフラ構築・運用や、クローリング・分析・検索などを主体とした開発を行なっています。

Ruby on RailsやDjango、Pythonなどの開発依頼などお気軽にお声がけください。

開発パートナーを増やしたいという企業と積極的に繋がっていきたいです。

お問い合わせやご依頼・ご相談など

    関連記事

    1. Elasticsearch 6 を使ったデータ検証 その5( クエリ …

    2. CentOS7のPython3でJUMAN++のインストールと利用

    3. Tableau Desktopでダッシュボードの編集

    4. Scrapyでデータの保存をmongodbにしてみる(Scrapy そ…

    5. kibana と Beats (metricbeat)を使ってサーバの…

    6. scrapy-redisを使って、redisを使ったクローリングを試…