Django入门与实践-第25章:Markdown 支持(完结)
让我们在文本区域添加 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 支持(完结)的更多相关文章
- Django入门与实践-第15章:用户注销(完结)
# myproject/settings.py LOGOUT_REDIRECT_URL = 'home' http://127.0.0.1:8000/logout/ # myproject/urls. ...
- Django入门与实践-第26章:个性化工具(完结)
http://127.0.0.1:8000/boards/1/topics/62/reply/ 我觉得只添加内置的个性化(humanize)包就会很不错. 它包含一组为数据添加“人性化(human t ...
- Django入门与实践-第14章:用户注册(完结)
http://127.0.0.1:8000/signup/ django-admin startapp accounts INSTALLED_APPS = [ 'accounts', ] # mypr ...
- 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 ...
- 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 ...
- 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: ...
- Django入门与实践-第24章:我的账户视图(完结)
http://127.0.0.1:8000/settings/account/ #好的,那么,这部分将是我们最后的一个视图.之后,我们将专心来改进现有功能. #accounts/views.py fr ...
- Django入门与实践-第23章:分页实现(完结)
http://127.0.0.1:8000/boards/1/ #从现在起,我们将在 board_topics 这个视图中来操作. python manage.py shell from django ...
- 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 ...
随机推荐
- as3 TweenMax TweenLite方法
as3 TweenMax TweenLite方法补充(暂停.重新播放.倒序播放).现在来好好的学习一下: TweenLite.to(mc, 1.5, {x:100}); 里面的mc指所作用的对象, ...
- python之类的相关知识
面向对象技术简介 类: 用来描述具有相同的属性和方法的对象的集合.它定义了该集合中每个对象所共有的属性和方法.对象是类的实例. 类变量:类变量在整个实例化的对象中是公用的.类变量定义在类中且在函数体之 ...
- 软件工程导论复习 如何画系统流程图和数据流图 part2
数据流图(DFD) 数据流图,简称DFD,是SA方法中用于表示系统逻辑模型的一种工具,它以图形的方式描绘数据在系统中流动和处理的过程,由于它只反映系统必须完成的逻辑功能,所以它是一种功能模型.下 ...
- [故障引起的故事]URL中带加号的处理
问题起因: 客户订购了一关键字为"e+h 变送器" , 在首页推荐广告中,会根据用户在search 搜索过的关键字进行一个匹配投放.技术实现是UED 通过JS 获取coo ...
- 【Java】JVM(六)虚拟机字节码执行引擎
一.概述 执行引擎是虚拟机中最核心的部分之一, 虚拟机自己实现引擎,自己定义指令集和执行引擎的结构体系. 二.栈帧 栈帧包含(1)局部变量表.(2)操作数栈.(3)动态链接.(4)方法返回地址.(5) ...
- 大型运输行业实战_day02_2_数据模型建立
1.模型分析 1.基本必备字段 id state type createTime updateTime 2.车票 : 车次 开始车站 到达车站 出发时间 票价 ...
- jQuery实现锚点滑动定位
go=function(index){ var top = $('#caseNewGuide' + index).offset().top; $('html, body').animate({ scr ...
- DAO层注入HibernateTemplate的两种方式
-------------------------siwuxie095 DAO 层注入 HibernateTemplat ...
- sqlserver 字符串拆分和取某分隔符之前的字符串
ALTER FUNCTION [dbo].[f_splitSTR]( ), --待分拆的字符串 ) --数据分隔符 )RETURNS @re TABLE( col varchar(max)) AS B ...
- 解决python中csv文件中文写入问题
一.前言 一般来说,为了方便,使用python的时候都会使用csv模块去写数据到csv文件,但是写入中文的时候,经常会报错: UnicodeEncodeError: 'ascii' codec can ...