Djangoメモ(33) : 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><br></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 %}
templates/edit_post.html
も同様に編集(クリックで展開){% 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エディタを追加