flask使用markdown富文本编辑器(flask学习)

  • baagee 发布于 2017-03-02 23:23:11
  • 分类:Python
  • 5604 人围观
  • 11 人喜欢

为了使内容更加的丰富,不再是纯文本,所以使用Markdown富文本编辑器,并实时预览。所用的包是:

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

1,使用Flask-PageDown

 Flask-PageDown 扩展定义了一个 PageDownField 类,这个类和 WTForms 中的 TextAreaField 接口一致。使用 PageDownField 字段之前,先要初始化扩展,例如:

from flask_pagedown import  PageDown
.............
# 初始化pagedown
pagedown=PageDown()
pagedown.__init__(app)

若想把多行文本控件转换成 Markdown 富文本编辑器,form 表单中的 description 字 段要进行修改,

from flask_pagedown.fields import PageDownField

class userForm(FlaskForm):
    description = PageDownField('简介')
    ............

然后再表单HTML页面引入pagedown的js文件

{{ pagedown.include_pagedown() }}

再次刷新页面就生效啦,在多行文本字段中输入 Markdown 格式的文本会被立即渲染成 HTML 并 显示在输入框下方。如图:

2,在服务器上处理富文本 

提交表单后,POST 请求只会发送纯 Markdown 文本,页面中显示的 HTML 预览会被丢掉。 和表单一起发送生成的 HTML 预览有安全隐患,因为攻击者轻易就能修改 HTML 代码, 让其和 Markdown 源不匹配,然后再提交表单。安全起见,只提交 Markdown 源文本,在 服务器上使用 Markdown(使用 Python 编写的 Markdown 到 HTML 转换程序)将其转换 成 HTML。得到 HTML 后,再使用 Bleach 进行清理,确保其中只包含几个允许使用的HTML 标签。

接下来在数据表里新加一个字段(desc_html)用来保存对应的html标签的文本,并修改User模型:

from markdown import markdown
import bleach
from sqlalchemy import event

class User(db.Model):
    __tablename__='bw_user'
    ..........
    desc_html = db.Column(db.Text),
    .........

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

event.listen(User.description, 'set', User.html_desc)

html_desc 函数注册在 description 字段上,是 SQLAlchemy“set”事件的监听程序,这意 味着只要这个类实例的 description 字段设了新值,函数就会自动被调用。html_desc函数 把 description 字段中的文本渲染成 HTML 格式,结果保存在 desc_html 中,自动且高效地完成 Markdown 文本到 HTML 的转换。

真正的转换过程分三步完成。首先,markdown() 函数初步把 Markdown 文本转换成 HTML。 然后,把得到的结果和允许使用的 HTML 标签列表传给 clean() 函数。clean() 函数删除 所有不在白名单中的标签。转换的最后一步由 linkify() 函数完成,这个函数由 Bleach 提 供,把纯文本中的 URL 转换成适当的 <a> 链接。最后一步是很有必要的,因为 Markdown 规范没有为自动生成链接提供官方支持。PageDown 以扩展的形式实现了这个功能,因此 在服务器上要调用 linkify() 函数

就这样完成了储存,接下来显示就简单了

{{ user.html_desc | safe }} 

渲染 HTML 格式内容时使用 | safe 后缀,其目的是告诉 Jinja2 不要转义 HTML 元素。出 于安全考虑,默认情况下 Jinja2 会转义所有模板变量。


标签: python falsk

评论

点击图片切换
还没有评论,快来抢沙发吧!