我们编辑长文章的时候，单一的文本格式便满足不了要求，于是我们使用PageDown，PageDown的作用是使用javascript实现客户端markdown到html的程序转换。

Flask-PageDown把PageDown集成到wtf表单中， 换言之就是使用javascript把wtf中的markdown转换成html。

一. 安装扩展flask-pagedown, markdown, bleach

& pip install flask-pagedown markdown bleach

二. 修改|flasky/config.py

初始化扩展

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

三.修改|-app/-main/forms.py

把PostForm中的TextAreaField字段转换为PageDownField字段，它俩接口一样。

from flask_pagedown.fields import PageDownFieldclass PostForm(FlaskForm):body = PageDownField("What's on your mind?", validators=[ DataRequired() ])submit = SubmitField('Submit')

四. 修改index.html

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

pagedown.include_pagedown()语句在模板中导入了javascript代码，作用是把wtf中的PageDownField字段中的markdown转换为html预览。

五. 效果演示

如图所示，在wtf表单的PageDownField字段中输入markdown文本，下面就会显示html预览，这样用户在编辑文章内容的时候在下方就会显示html文本，满足了我们对不同格式的要求。

11.4 使用Flask-PageDown支持富文本文章相关推荐

Python-flask 使用Markdown和Flask-PageDown支持富文本文章
Python-flask 使用Markdown和Flask-PageDown支持富文本文章导入库 from flask_pagedown import PageDown from flask_pag ...
AndroidRichText 让Textview轻松的支持富文本（图像ImageSpan、点击效果等等类似QQ微信聊天）...
代码地址:https://github.com/Luction/AndroidRichText AndroidRichText帮助实现像QQ,微信一样的,一个TextView里既有文字又有表情又有图片 ...
Winform Datagridview 单元格html格式化支持富文本
Winform Datagridview 单元格html格式化支持富文本示例: 源码:https://github.com/OceanAirdrop/DataGridViewHTMLCell 参考: ...
Markdown文章转化为富文本文章
使用富文本文章的平台有知乎,使用Markdown文章的有CSDN. 文章目录方法一方法二方法一想要将Markdown文章转化为富文本文章,使用这个网站:https://md.aclickall ...
xiuno开发文档_觅道文档开始支持富文本编辑器
MrDoc(觅道文档)是州的先生基于 Python 后端编写的开源在线文档系统. 最初,觅道文档以 Markdown 书写为核心,集成了 EditorMD 和 Vditor 两大主流 Markdown ...
RichEditeText——android图文混排富文本文章编辑器实现详解
需求:android 实现富文本编辑器,并且实现html解析和生成. 功能点: 字体加粗,斜体,下划线,删除线字体设置大小默认大(18px),中(16px),小(14px) 字体设置颜色换行 ...
html5qq邮箱代码,使用qq邮箱批量发送邮件实例源码（支持富文本）
资源下载此资源下载价格为3D币,请先登录资源文件列表 MailSending/MailSending/App.config , 184 MailSending/MailSending/Form1.D ...
如何批量发送html邮件,使用qq邮箱批量发送邮件实例源码（支持富文本）
[实例简介] [实例截图] [核心代码] using System; using System.Collections.Generic; using System.ComponentModel; us ...
java 接收前台富文本_java 解析富文本处理 img 标签
很多项目都需要到富文本来添加内容,就好比新闻啊,旅游景点之类的,都需要使用富文本去添加数据,然而怎么我这边就发现了两个问题 1)怎样将富文本的图片的 src 获取出来? 2)后台上传的时候用的是相对路 ...

11.4 使用Flask-PageDown支持富文本文章