对于发布短消息和状态更新来说,纯文本足够用了,但如果用户想发布长文章,就会觉得在格式上受到了限制,因此可以使用markdown。
依赖:
- PageDown:使用 JavaScript 实现的客户端 Markdown 到 HTML 的转换程序。
- Flask-PageDown:为 Flask 包装的 PageDown,把 PageDown 集成到 Flask-WTF 表单中。
- Markdown:使用 Python 实现的服务器端 Markdown 到 HTML 的转换程序。
- Bleach:使用 Python 实现的 HTML 清理器。
这些包都可以用pip安装:
pip install flask-pagedown markdown bleach
Flask-PageDown 扩展定义了一个 PageDownField 类,这个类和 WTForms 中的 TextAreaField接口一致。使用 PageDownField 字段之前,先要初始化扩展,
...
from flask_pagedown import PageDown
# 创建对象
...
pagedown = PageDown()
# 初始化对象
def config_extensions(app):
...
pagedown.init_app(app)
若想把首页中的多行文本控件转换成 Markdown 富文本编辑器,表单中的字段要进行修改,
# 发布文章表单
class PublishForm(FlaskForm):
title = StringField('',render_kw={'placeholder':'主题'}, validators=[DataRequired()])
# markdown
content = PageDownField('',render_kw={'placeholder':'内容'}, validators=[DataRequired(), Length(1, 9999, message='文章字数超出限制')])
submit = SubmitField('立即发布')
Markdown 预览使用 PageDown 库生成,因此要在模板中修改。Flask-PageDown 简化了这个过程,提供了一个模板宏,从 CDN 中加载所需文件:
{% extends 'base/base.html' %}
{% import 'bootstrap/wtf.html' as wtf %}
{% block title %}
记录
{% endblock %}
{% block scripts %}
{{ super() }}
{# markdown#}
{{ pagedown.include_pagedown() }}
{% endblock %}
{% block page_content %}
<div style="width: 800px; height: 800px; background-color: white; margin: 0 auto">
{{ wtf.quick_form(form) }}
</div>
{% endblock %}
做了上述修改后,在多行文本字段中输入 Markdown 格式的文本会被立即渲染成 HTML 并显示在输入框下方。