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. 外部のライブラリを利用してのAWS Lambdaの設定

    2. AWSのLambdaでScrapyを動かす その1

    3. Django2.1.1 を使ってログインを実装する

    4. AkismetのスパムフィルタをpythonとDjangoで実装

    5. terraformでRDS PROXYの設定

    6. LPIC 101を受験してみました。

    最近の記事

    制作実績一覧

    ITシステム開発の開発先・発注先の選び方を見つけるコンシェルジュサービス

    ITシステム開発の開発先・発注先の選び方を見つけるコンシェルジュサービス

    ITクリエイターのための転職・仕事情報サイト

    ITクリエイターのための転職・仕事情報サイト

    SNS分析での転職支援

    SNS分析での転職支援

    受託パートナーのマッチングとSES人材のマッチング

    受託パートナーのマッチングとSES人材のマッチング