让我们在文本区域添加 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. as3 XML类和XMLList类的区别

    一.XML类和XMLList类的区别       AS3.0中,处理XML主要用到两个主类,XML类和XMLList类,这两个类的很多内容是共通的.应该有人会问,XML和XMLList的区别是什么? ...

  2. WDA-FPM-2-APPLICATION-TABSTRIP(OIF)

    转载:https://www.cnblogs.com/sapSB/p/10081344.html   FPM二:简单的APPLICATION-TABSTRIP(OIF) 1.新建WDA程序ZLYFPM ...

  3. ArrayList 原理(2)

    1. 概述 关于Java集合的小抄中是这样描述的: 以数组实现.节约空间,但数组有容量限制.超出限制时会增加50%容量,用System.arraycopy()复制到新的数组,因此最好能给出数组大小的预 ...

  4. U3D游戏运行时资源是如何从AB中加载出来的

    以安卓为例 1,游戏启动,自定义版本管理器去安卓的持久化目录下查找我们自定久的版本管理文件 rep.db,若该文件不存在,说明这是游戏第一次启动,于是就把streammingAssets下的LUA文件 ...

  5. 大型运输行业实战_day08_1_memcache缓存生产应用

    1.memcache使用环境搭建 1.安装memcached服务器 安装方法 以管理员身份打开cmd,在cmd中执行如下命令: 注意:在执行该命令时必须在memcached.exe文件下执行. 2.开 ...

  6. 60. Permutation Sequence (String; Math)

    The set [1,2,3,…,n] contains a total of n! unique permutations. By listing and labeling all of the p ...

  7. CSS中的各种width(宽度)

    一 window对象的innerWidth.outerWidth innerWidth是可用区域的宽度(内容区 + 滚动条) outerWidth是浏览器窗口的宽度(可用区域的宽度+审查元素区域的宽度 ...

  8. 控制span的width属性及display属性值的选择

    给span设置width样式,会发现并没有改变它的宽度,但有时候我们需要给它设置固定的宽度,那么就可以设置它的display样式,改变span的显示模式就好了. span默认显示模式是inline,无 ...

  9. 9-sort使用时的错误

    /*                                              矩形嵌套 题目内容: 有n个矩形,每个矩形可以用a,b来描述,表示长和宽.矩形X(a,b)可以嵌套在矩形 ...

  10. 9-n个人中选k个人的选择方法种类

    用递归法计算从n个人中选择k个人组成一个委员会的不同组合数分析: 1.如果k>n,结果为0 2.k=n时,只有1组 3.k<n的时候,可以把解空间分为两部分:假设其中一个人叫X,那么选X的 ...