支持 Markdown 语法, 并添加 富文本文章的预览功能.

使用到的包列表:

  • PageDown : 使用 JavaScript 实现的客户端 Markdown 到 HTML 的转换程序.
  • Flask-PageDown : 为 Flask 包装的 PageDown, 把 PageDown 集成到 Flask-WTF 表单中.
  • Markdown : 使用 Python 实现的服务端 Markdown 到 HTML 的转换程序.
  • Bleanch : 使用 Python 实现的 HTML 清理器.

一. 安装 :

$ pip install flask-pagedown markdown bleach

二. 初始化 Flask-PageDown :

与在 Flask 中初始化其他扩展一样.

from flask_pagedown import PageDown
# ...
pagedown = PageDown()
# ...
def create_app(config_name):
    # ...
    pagedown.init_app(app)
    # ...

三. 使用(渲染) Flask-PageDown :

Flask-PageDown 扩展定义了一个 PageDownField 类, 该类与 WTForms 的 TextAreaField 接口一致.

from flask_pagedown.fields import PageDownField

class PostForm(Form):
    body = PageDownField("Post:", validators=[required()])
    submit = SubmitField("Submit")

四. Markdown 预览 :

Markdown 预览使用 PageDown 库生成, 因此需要在 Jinja 模板中修改. Flask-PageDown 简化了这一过程, 提供了一个红模板, 从 CDN 中加载所需文件.

{% block scripts %}
{{ super() }}
{{ pagedown.include_pagedown() }}
{% endblock %}

五. 在服务器上处理富文本

出于安全考虑, 表单在提交后, POST 请求只会发送纯 Markdown 文本给服务端, 页面中显示的 HTML 预览会被丢掉. 被提交的 POST 数据, 在服务端使用 Markdown 将其转换为 HTML, 得到HTML 之后, 在使用 Bleach 进行清理, 确保其中只包含几个允许使用的 HTML 标签.

转换步骤 :

  1. markdown() 函数将 Markdown 文本转换成 HTML;
  2. clean() 函数将 HTML 与允许使用的 HTML 标签列表对比, 清除所有不在白名单中的标签.
  3. linkify() , 由 Bleach 提供, 把纯文本的 URL 转换成适当的 链接. 因为 Markdown 规范没有为自动生成 链接 提供官方支持, PageDown 以扩展的方式实现了该功能.

示例代码 :

from markdown import markdown
import bleach

class Post(db.Model):
    # ...
    body = db.Colume(db.Text)
    body_html = db.Column(db.Text)
    # ...

    @staticmethod
    def on_changed_method(target, value, oldvalue, initiator):
        allowed_tags = ["a", "abbr", "acronym", "b", "blockquote", "code", "em",
                        "i", "li", "ol", "pre", "strong", "ul", "h1", "h2","h3","h4","p"]
        target.body_html = bleach.linkify(bleach.clean(markdown(value, output_format="html"), tags=allowed_tags, strip=True))

db.event.listen(Post.body, "set", Post.on_changeed_body)
# on_changed_body 函数注册在 body 字段上, 是 SQLIAlchemy "set" 事件的监听程序, 这意味着只要这个类实例的 body 字段设了新值, 函数就会自动被调用. on_changed_body 函数把 body 字段中的文本渲染成 HTML 格式, 结果保存在 body_html 中, 自动高效的完成 Markdown 文本到 HTML 的转换.

flask 扩展之 -- flask-pagedown的更多相关文章

  1. Flask從入門到入土(二)——請求响应與Flask扩展

    ———————————————————————————————————————————————————————————— 一.程序和請求上下文 Flask從客戶端收到請求時,要讓視圖函數能訪問一些對象 ...

  2. Inside Flask - flask 扩展加载过程

    Inside Flask - flask 扩展加载过程 flask 扩展(插件)通常是以 flask_<扩展名字> 为扩展的 python 包名,而使用时,可用 import flask. ...

  3. Flask 扩展 自定义扩展

    创建一个为视图访问加日志的扩展Flask-Logging,并从中了解到写Flask扩展的规范. 创建工程 先创建一个工程,目录结构如下: flask-logging/ ├ LICENSE # 授权说明 ...

  4. Flask 扩展 表单

    pip install flask-wtf 一个简单的表单 from flask_wtf import Form from wtforms import StringField from wtform ...

  5. Flask从入门到精通之flask扩展

    Flask被设计成可扩展形式,因此并没有提供一些重要的功能,比如数据库和用户认证,所以开发者可以自由选择最适合程序的包,或者按需求自行开发.社区成员开发了大量不同用途的扩展,如果这还不能满足需求,你还 ...

  6. Flask扩展实现HTTP令牌token认证HTTPTokenAuth

    Token认证 在restful设计中,用户认证模式通常使用json web token,而不会使用传统的HTTP Basic认证(传入账号密码) token认证模式如下:在请求header中加入to ...

  7. 2.6、Flask扩展

    Flask 被设计为可扩展形式,故而没有提供一些重要的功能,例如数据库和用户认证,所以开发者可以自由选择最适合程序的包,或者按需求自行开发. 社区成员开发了大量不同用途的扩展,如果这还不能满足需求,你 ...

  8. Flask基础(13)-->Flask扩展Flask-Script

    Flask基础(12)-->Flask扩展Flask-Script # 前提是安装了Flask-Script # 联网运行 pip install flask-script from flask ...

  9. flask扩展系列之 - 访问速度限制

    flask-limiter 是一个对客户端的访问速率进行限制的flask扩展.可以自定义一些访问的(速度)限制条件来把那些触发限制的请求拒之门外.一般常用来进行对爬虫的限制. 下面就常见的用法,举了一 ...

  10. Flask扩展 -- flask-mail

    电子邮件是最常用的通信方式之一.虽然Python标准库中的smtplib包可用在Flask程序中发送电子邮件,但包装了smtplib的Flask-Mail扩展能更好的和Flask集成. 1.安装Fla ...

随机推荐

  1. .net core CLI(创建VueJS||Angular结合的项目)

    net core cli 是快速创建模板项目 安装CLI 参考: https://www.hanselman.com/blog/dotnetNewAngularAndDotnetNewReact.as ...

  2. 蓝桥杯-趣味算式-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  3. 编写高质量的JavaScript代码(一)

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 2016年6月加入腾讯,目前在SNG社交网络质量部从事内部平台工具的研发.熟悉PHP.JS.CSS,喜欢弹吉他 ...

  4. Docker- 创建支持SSH服务的容器镜像

    示例 - CentOS7 [root@CentOS-7 ~]# cat ssh-centos7 FROM centos:centos7 MAINTAINER anliven "anliven ...

  5. cd命令使用详解

    cd命令是目录切换命令,是shell内置命令. 语法: cd [-L|-P] [dir] 选项: -p 如果要切换到的目标目录是一个符号连接,直接切换到符号连接指向的目标目录 -L 如果要切换的目标目 ...

  6. LeetCode5. Longest Palindromic Substring 最长回文子串 4种方法

    题目链接:https://leetcode.com/problems/longest-palindromic-substring/ 题意很简单,就是求一个字符串得最长子串,这里的子串指连续的. 本文给 ...

  7. 浅谈prototype和__proto__

    讲prototype前先看一下对象的静态方法和实例方法. function Person () { }; Person.sayHello = function () { //定义一个静态方法 cons ...

  8. 响应式网站-全屏banner响应的2中方法 - 被吃掉的banner

    通常来讲, 设计师们喜欢把banner设计成全屏(1920px或以上) 主题内容控制在一定的范围内一般在1200px左右 这样的设计即可以在宽屏上的表现很好.也能向下兼容一些小屏幕的设备: 如下图(所 ...

  9. 开涛spring3(9.4) - Spring的事务 之 9.4 声明式事务

    9.4  声明式事务 9.4.1  声明式事务概述 从上节编程式实现事务管理可以深刻体会到编程式事务的痛苦,即使通过代理配置方式也是不小的工作量. 本节将介绍声明式事务支持,使用该方式后最大的获益是简 ...

  10. Linux 库文件详解

    转自: http://www.cppblog.com/deane/articles/165216.html http://blog.sciencenet.cn/blog-1225851-904348. ...