WYSIWYG

WYSIWYG?

WhatYouSeeIsWhatYouGetの略WYSIWYGは、「好きなように文章を書く」という意味で、文章を書くときに豊かさを増す機能です.

Medium Editor github: https://github.com/yabwe/medium-editor
使用方法
1.フォームで使用する編集可能なクラスを作成します.htmlに次のコードを記述します.

<script src="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/js/medium-editor.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">

<script>var editor = new MediumEditor('.editable');</script>

formsのコンテンツフィールドに編集可能クラスを適用します.

    content = forms.CharField(widget=forms.Textarea(attrs={'class': 'editable text-start',
                                                           'style': 'heigth: auto;'}))

投稿を作成するときに適用するので、articip/formsのcontentフィールドに追加します.
適用後、投稿を作成するとdetailsページに直接タグが表示されます.articleapp/detail.htmlで暴露されたコンテンツのコードを安全にフィルタリングします.
safeフィルタはタグなどのタグを削除してダウンロードし、コンテンツのみを表示します.

            <div class="text-start">
                {{ target_article.content | safe  }}
            </div>

同様に、updateでも同様に適用されるように変更することもできます.
articleapp/update.htmlに次のコードを追加

<script src="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/js/medium-editor.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">

<script>var editor = new MediumEditor('.editable');</script>

パブリケーションの変更時にアイテムを設定する必要はありません

ForeginKeyを設定するフィールドはModelChoiceFieldです.
ModelChoiceFieldはモデル間の関係を表すフィールドで、querysetを記入する必要があります.
requiredを使用して存在しないように設定します.

    project = forms.ModelChoiceField(queryset=Project.objects.all(), required=False)