django-markdownx テキストエリアとプレビューを横並びにする方法

初めに

本記事では、django, markdownxを使った場合に、
デフォルトでテキストエリアの下にプレビューが表示されるのを、横並びに修正する方法を紹介します。
また、デザインはBootstrap4を使います。

バージョン

• python: 3.7.3
• Django: 2.2.3
• django-markdownx: 2.0.28

準備

既にDjangoのプロジェクトやアプリは作られていて、
markdownxを使って記事などの作成画面ができている前提で進めます。

やること

以下の2つファイルを修正すれば実現します。

1. TEMPLATES_DIRS/markdownx/widget2.htmlの作成
2. settings.pyに上記を読み込ませるように修正

以下が詳細になります。

1. TEMPLATES_DIRS/markdownx/widget2.htmlの作成

まずは作成しなかった場合にどんなwidgetが読み込まれるか、
githubの実際のソースコードを見てみます。

# widgets.py

# For backward compatiblity methods.
is_post_10 = DJANGO_VERSION[:2] > (1, 10)

class MarkdownxWidget(forms.Textarea):
    """
    MarkdownX TextArea widget for forms. Markdown enabled version of
    Django "TextArea" widget.
    """

    template_name = 'markdownx/widget{}.html'.format('2' if is_post_10 else str())

    def get_context(self, name, value, attrs=None):
	# 省略

template_nameを見ると、Djangoのバージョンが1.10より大きかったら、
markdownx/widget2.htmlを指定しています。

見に行くと

<!-- widget2.html -->

<div class="markdownx">
    {% include 'django/forms/widgets/textarea.html' %}
    <div class="markdownx-preview"></div>
</div>

includeの下にpreviewがあります。
ここを修正していきます。
今回はプロジェクト直下にtemplatesディレクトリがある場合を説明します。

自分のプロジェクトに以下を作成します。

<!-- templates/markdownx/widget2.html -->

<div class="markdownx row">
    <div class="col-md-6 col-lg-6">
        {% include 'django/forms/widgets/textarea.html' %}
    </div>
    <div class="col-md-6 col-lg-6">
        <div class="markdownx-preview"></div>
    </div>
</div>

Bootstrapのグリッドデザインに合わせるように、
テキストエリアとプレビューを横に表示するよう修正しました。

2. settings.pyに上記を読み込ませるように修正

1で作成したwidget2.htmlを読み込ませるように
settings.pyの以下を修正します。

# settings.py

INSTALLED_APPS = [
	# 省略

	'django.forms',  # 追加
]

# 追加
FORM_RENDERER = 'django.forms.renderers.TemplatesSetting'

これで読み込むようになりました。
また、django.formsはdjango.contrib.staticfilesよりも下に配置するように、注意が必要です。

終わりに

これでwidget2.htmlを編集することで、割と自由にスタイルを適用できるようになりました。
また、Djangoのformのwidgetで例えばcheckboxのスタイルを変えたいとしたい時は、
templates/django/forms/widgets/
配下にcheckbox.htmlを作成し、修正することで読み込まれます。