让我们在文本区域添加 Markdown 支持来改善用户体验。
你会看到要实现这个功能非常简单。
首先,我们安装一个名为 Python-Markdown 的库:
pip install markdown
#我们可以在 Post 视图的 model 中添加一个新的⽅法:
#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'))
#这里我们正在处理用户的输入,所以我们需要小心点。
#当使用 Mardown功能时,我们需要先让它转义一下特殊字符,然后再解析出 Markdown 标签。
#这样做之后,输出字符串可以安全的在模板中使用。
现在,我们只需要在模板 topic_posts.html 和 reply_topic.html 中修改一下 form。
{{ post.message }}
修改为:
{{ post.get_message_as_markdown }}
从现在起,用户就可以在帖子中使用 Mardown 语法来编辑了。
Markdown 编辑器
我们还可以添加一个名为 [SimpleMD](**)** 的非常酷的 Markdown 编辑器。
可以下载 JavaScript 库,后者使用他们的CDN:
<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>
现在来编辑一下 base.html ,为这些额外的Javascripts声明一个block (译者注:方便其他模板继承):
#templates/base.html
<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 emptyblock here! -->
#首先来编辑 reply_topic.html 模板:
#templates/reply_topic.html
{% 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 %}
默认情况下,这个插件会将它找到的第一个文本区域转换为 markdown 编辑器。
接下来在 edit_post.html 模板中做同样的操作:
#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 %}

Django入门与实践-第25章:Markdown 支持(完结)的更多相关文章

  1. Django入门与实践-第15章:用户注销(完结)

    # myproject/settings.py LOGOUT_REDIRECT_URL = 'home' http://127.0.0.1:8000/logout/ # myproject/urls. ...

  2. Django入门与实践-第26章:个性化工具(完结)

    http://127.0.0.1:8000/boards/1/topics/62/reply/ 我觉得只添加内置的个性化(humanize)包就会很不错. 它包含一组为数据添加“人性化(human t ...

  3. Django入门与实践-第14章:用户注册(完结)

    http://127.0.0.1:8000/signup/ django-admin startapp accounts INSTALLED_APPS = [ 'accounts', ] # mypr ...

  4. Django入门与实践-第13章:表单处理(完结)

    http://127.0.0.1:8000/boards/1/ http://127.0.0.1:8000/boards/2/ http://127.0.0.1:8000/boards/3/ http ...

  5. Django入门与实践-第12章:复用模板(完结)

    http://127.0.0.1:8000/http://127.0.0.1:8000/boards/1/http://127.0.0.1:8000/boards/2/http://127.0.0.1 ...

  6. Django入门与实践-第11章:URL 分发(完结)

    http://127.0.0.1:8000http://127.0.0.1:8000/boards/1/http://127.0.0.1:8000/boards/2/http://127.0.0.1: ...

  7. Django入门与实践-第24章:我的账户视图(完结)

    http://127.0.0.1:8000/settings/account/ #好的,那么,这部分将是我们最后的一个视图.之后,我们将专心来改进现有功能. #accounts/views.py fr ...

  8. Django入门与实践-第23章:分页实现(完结)

    http://127.0.0.1:8000/boards/1/ #从现在起,我们将在 board_topics 这个视图中来操作. python manage.py shell from django ...

  9. Django入门与实践-第22章:基于类的视图

    http://127.0.0.1:8000/boards/1/topics/2/posts/2/edit/ http://127.0.0.1:8000/ #boards/views.py from d ...

随机推荐

  1. Centos LVM 创建 删除 扩大 缩小

    新建LVM的过程1.使用fdisk 新建分区 修改ID为8e3.使用 pvcreate 创建 PV 4.使用 vgcreate 创建 VG 5.使用 lvcreate 创建 LV 6.格式化LV7.挂 ...

  2. 用FireDAC获取 SQL SERVER错误文本信息

    SQL SERVER获取错误文本信息,BDE.adoquery一直取不到,FDQuery可以了 Some DBMS, like SQL Server, return messages as an ad ...

  3. hashlib 加密模块使用说明

    import hashlib  #hashilib 模块 m = hashlib.md5() m.update('hello 天王盖地虎'.encode(encoding = 'utf-8)) m.h ...

  4. Python之风湿理论值函数即变量

    一,风湿历练:函数即变量,这样执行程序是不会报错的 def foo(): print ("from foo") bar() def bar(): print "form ...

  5. TensorFlow入门-Tianic数据集训练

    import pandas as pd import tensorflow as tf from sklearn.model_selection import train_test_split imp ...

  6. java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderL

    今天学习spring+cxf的时候遇到一个问题:在web.xml中配置了spring的上下文监听器: <listener> <listener-class>org.spring ...

  7. 2017.1.9版给信息源新增:max_len、max_db字段

    2017.1.8a版程序给信息源增加max_len.max_db字段,分别用于控制:获取条数.数据库保留条数. max_len的说明见此图: max_db的说明见此图: 当max_len和max_db ...

  8. JS中的继承实现方式

    第一种:通过prototype来实现 prototype.html <!DOCTYPE html><html lang="en"><head> ...

  9. Appium客户端,命令行启动server

    目标:通过命令行启动Appium的server   1.通过命令行安装的Appium   直接命令行输入appium即可启动服务   2.安装的Appium客户端   可以查看客户端中打印的启动日志: ...

  10. html中的innerHTML

    首先看个例子 <html> <head> <script type="text/javascript"> function getInnerHT ...