Djangoメモ(33) : Markdownエディタを追加する

• Markdownパッケージのインストール
• Markdownエディタを追加
• まとめ

A Complete Beginner's Guide to Djangoのチュートリアルを参考にMarkdownエディタを追加してみる。

Markdownパッケージのインストール

Markdownエディタを追加するにあたり、最初にMarkdownパッケージをインストールする。
Markdownパッケージはpipでインストールできる。

$ pip install markdown

今回はPipenvで環境を構築しているので下記コマンドを実行。

$ pipenv install markdown

動作するか確認してみる。

$ python
>>> import markdown
>>> markdown.version
'2.6.11'
>>> markdown.markdown('###test')
'<h3>test</h3>'
>>> markdown.markdown('###<br>')
'<h3><br></h3>'
>>> markdown.markdown('###<br>', safe_mode='escape')
'<h3>&lt;br&gt;</h3>'

それではMarkdownパッケージを使用してMarkdown記法で書かれたテキストを表示してみる。 boards/models.pyを以下のように編集。

from django.db import models
from django.utils.html import mark_safe
from markdown import markdown

class Post(models.Model):
    # ...

    def get_message_as_markdown(self):
        return mark_safe(markdown(self.message, safe_mode='escape'))

safe_mode='escape'でエスケープして、出力をsafe文字列としてマークするためにmark_safe()を使う。
次にtopic_posts.htmlとreply_topic.htmlの

{{ post.message }}

を

{{ post.get_message_as_markdown }}

に変更する。 これで以下のようにMarkdownで表示されるようになる。

Markdownエディタを追加

Markdownは表示できるようになったのでMarkdownエディタを追加する。
今回はSimpleMDEというライブラリを使用してみる。SimpleMDEのデモは下記リンクで確認可能。

JavaScript Markdown Editor - SimpleMDE

以下のCSSとJavaScriptが必要なのでCDNを使うか、ダウンロードしてstaticディレクトリに配置する。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>

テンプレートの継承先でJavaScriptを読み込めるようにtemplates/base.htmlにblockを追加する。

    <script src="{% static 'js/jquery-3.2.1.min.js' %}"></script>
    <script src="{% static 'js/popper.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    {% block javascript %}{% endblock %}  <!-- Add this empty block here! -->

templates/reply_topic.htmlではCSSとJavaScriptを読み込むようにしnew SimpleMDE();で初期化。
デフォルトでは最初のテキストエリアがMarkdownエディタに置き換わる。

{% extends 'base.html' %}

{% load static %}

{% block title %}Post a reply{% endblock %}

{% block stylesheet %}
  <link rel="stylesheet" href="{% static 'css/simplemde.min.css' %}">
{% endblock %}

{% block javascript %}
  <script src="{% static 'js/simplemde.min.js' %}"></script>
  <script>
    var simplemde = new SimpleMDE();
  </script>
{% endblock %}

{% extends 'base.html' %}

{% load static %}

{% block title %}Edit post{% endblock %}

{% block stylesheet %}
  <link rel="stylesheet" href="{% static 'css/simplemde.min.css' %}">
{% endblock %}

{% block javascript %}
  <script src="{% static 'js/simplemde.min.js' %}"></script>
  <script>
    var simplemde = new SimpleMDE();
  </script>
{% endblock %}

図のようなエディタが追加されていれば成功。

まとめ

• pip install markdownでMarkdownパッケージをインストール
• markdown(self.message, safe_mode='escape')のように使う
• Djangoではmark_safe()で出力をsafe文字列としてマークする
• SimpleMDEでMarkdownエディタを追加