文章の中に画像を挿入したいという例があります。ブログの本文は典型的な例ですし、コメント欄でもそのような機能が欲しい場合があります。幾つかの方法を紹介しましたが、今回はテキストエリアにドラッグアンドドロップをすると、ファイルのアップロードと本文へのURL挿入を行うウィジェットを作成していきます。管理画面でも、ドラッグアンドドロップでファイルが挿入されますし...通常のページでも同様です。複雑なので、先にソースコードのダウンロードをしたほうがわかりやすいと思います。ウィジェットを自作するまずwidgets.pyというファイルを作ります。reverse_lazy('blog:upload')forms.Textareaウィジェットを継承し、新しいウィジェットクラスを作りました。__init__()は、cssのクラスを追加するために上書きしたメソッドです。uploadableというクラス名を持つテキストエリアにJavaScriptでイベントを設定する為に、このウィジェットはcssのクラス名としてuploadableを持つことが保証されるようになります。vLargeTextFieldというクラス名は、Django管理サイト用の指定です。reverse_lazy('blog:upload')は、ファイルアップロード用のビューURLを持たせています。ビューは後で作成します。Mediaは、このウィジェットを利用する際に読み込まれるcssやjsファイルを記述する場所です。}}とすると、ここに書いたファイルが自動的に読み込まれます。csrf.jsは次のようにします。Djangoで、Ajaxでも紹介しましたが、POSTメソッドでAjaxを利用する際に必要な記述です。getCookie('csrftoken');upload.jsです。}});処理の流れは次のような感じです。テキストエリアにファイルがドラッグアンドドロップされるAjaxでファイルをDjangoのビューに送信するビューはファイルを保存し、ファイルのURLを返す受け取ったURLをテキストエリアの最後に挿入する。画像ならimg要素、それなければ単純なa要素forms.pyで、ファイルを受け取るフォームを作成しておきます。file_urlFileUploadFormは、Ajaxで送信されたファイルを処理するためのフォームです。定義したsave()は、ファイルを保存してファイルURLを返しています。Djangoで、ファイルアップロードでも紹介したフォームです。ちなみにですが、今回の例はモデルを利用しないで画像を保存しています。次に、Ajaxでファイルを受け取るビューを作成します。url.pyに定義しておきましょう。name='upload'),そして、次のようなビューを作っておきます。これがAjaxでのアップロード処理を受け取るビューです。HttpResponseBadRequest()URLを完全なURLにしたい場合は、次のようになるでしょう。HttpResponseBadRequest()自作ウィジェットを使ってみる準備が終わったので、上で作ったカスタムウィジェットの利用方法を説明します。説明と言っても大したことはなく、アップロード可能にしたいテキストエリアのウィジェットをFileUploadableTextAreaに変更するだけです。FileUploadableTextAreaのようにします。file_url通常のフォームで使う場合は、次のようになるでしょう。}}という記述が必要なこと以外は通常のフォームとして利用できます。type="submit">送信</button></form>管理画面で使う際は、記事本文のウィジェットを今回作ったFileUploadableTextAreaに変更してもらう必要があります。方法はありますが、シンプルに済ませるならば、次のようにform属性を上書きするだけで大丈夫です。PostAdmin)今回のアップロード処理は、どんなファイルであろうと受け付けます。自分で使う用ならば問題はないのですが、第三者が使う場合...例えばコメント欄なんかで使いたい場合は、セキュリティ的な面をもう少し考えることになります。PostsDjangoで、サジェスト機能付きフォームを作るDjangoとJavaScriptを使い、入力内容に応じてデータをサジェストするフォームを作成していきます。DjangoカスタムウィジェットDjangoで、ブログアプリの本文に画像を挿入する方法まとめブログアプリケーションを作成した際の、記事本文へ画像を差し込む方法についてよく質問が来ますので、それについてを説明していきます。これは記事をどうやって書いているかによって、方法が変わります。DjangoDjangoで、プレビュー付き画像アップロード欄を作るDjangoでImageFieldを使うと画像のアップロード欄が作られますが、プレビューは表示されません。ウィジェットを自作し、プレビュー付きの画像アップロード欄を作ります。DjangoカスタムウィジェットDjangoで、表示・非表示切り替え可能なチェックボックスを作るDjangoで、表示・非表示切り替え可能なチェックボックスとなるカスタムウィジェットを作成していきます。DjangoカスタムウィジェットComment記事にコメントするまだコメントはありません。幾つかの方法で、ブログの更新を受け取れます。