Wagtailにマークダウンテキストエディタを導入

Wagtailで、投稿の本文にコードを記述したかったので
リッチテキストエディタ→マークダウンテキストエディタに変更した時にうまくいい数に苦労したのでやり方をメモします。

マークダウンテキストエディタの導入は色々やり方があるようで
早速、chtatGTPに聞いてみました。
chtatGTPが勧めるやり方で、"wagtailmarkdown"をインストールを試みましたが、
インストールが上手くいかず(バージョンのエラー的な？？)断念。

自分で調べたり、chtatGTPに違う聞き方をして試行錯誤し最終的には
wagtail-markdownを使うとう結論に至りました。

wagtail-markdownについて

wagtail-markdownについては、こちらが公式？のドキュメントになります。
https://github.com/torchbox/wagtail-markdown

最初に試したwagtailmarkdownとは、ハイフンがあるかないかくらいし違いがわかりませんが。

wagtail-markdownでマークダウンのテキストエディタの導入

まずは

pip install wagtail-markdown

settingディレクトリのbase.pyに、以下のように追記します。

base.py

INSTALLED_APPS = [
    "home",
    "search",
    "wagtail.contrib.forms",
    "wagtail.contrib.redirects",
    "wagtail.embeds",
    "wagtail.sites",
    "wagtail.users",
    "wagtail.snippets",
    "wagtail.documents",
    "wagtail.images",
    "wagtail.search",
    "wagtail.admin",
    "wagtail",
    "wagtailmarkdown",#←追加
    "modelcluster",

    ///省略///
]


///省略///



#追加
WAGTAILMARKDOWN = {
    #"autodownload_fontawesome": False,#←これは要らない
    "allowed_tags": [],  # optional. a list of HTML tags. e.g. ['div', 'p', 'a']
    "allowed_styles": [],  # optional. a list of styles
    "allowed_attributes": {},  # optional. a dict with HTML tag as key and a list of attributes as value
    "allowed_settings_mode": "extend",  # optional. Possible values: "extend" or "override". Defaults to "extend".
    "extensions": [],  # optional. a list of python-markdown supported extensions
    "extension_configs": {},  # optional. a dictionary with the extension name as key, and its configuration as value
    "extensions_settings_mode": "extend",  # optional. Possible values: "extend" or "override". Defaults to "extend".
}

ちょっと詰まった点として、ドキュメントでWAGTAILMARKDOWNの中に
"autodownload_fontawesome": False,が入っているのですが
これを書くとてテキストエディタのメニューのアイコンが消えてしまいました。(操作はします。)
アイコンはfontawesomを使っているようで、fontawesomのバージョン変更などのカスタマイズする際は必要なようですが
自分はカスタマイズは不要でとりあえずアイコンがきちんと表示できれば問題なかったので今回は消しました。

これで設定は終わりです。
次は実際に実装していきましょう。

モデル側でマークダウンをう使う場合は以下のように書きます。

models.py

from wagtail.core.models import Page
from wagtailmarkdown.fields import MarkdownField　#　MarkdownFieldインポート

class MyPage(Page):
    body = MarkdownField()

MarkdownFieldをインポートすることで、マークダウンの入力フィールドが使用可能になります。
あとは、マークダウンにしたい項目をMarkdownField()にすればOKです。
既に、他のフィールを設定している場合でもMarkdownField()に書き換えて変更できます。

また、テンプレートは一部抜粋ですがこのように書きます。

my_page.html

    <p>
        {% load wagtailmarkdown %}
        {{ page.body|markdown }}
    </p>

markdownというフィルタを適応することで、マークダウンがHTMLの表示になります。
このフィルタを使用する前に、 {% load wagtailmarkdown %}を読み込んでおくことに注意ください。

ここまで来たら、マイグレートします。

python manage.py makemigrations
python manage.py migrate

サーバーを立ち上げ、管理画面を見てみるとマークダウンのエディタになっていることが確認できます。

以上で完了です。