用flask开发个人博客（37）—— 使用Flask-pagedown实现博客文章预览的功能

一、引言

        本文主要讨论的内容，是将我们写的纯文本的博客文章，使用Flask-pagedown模块，将文本转换成html富文本数据，并在浏览器上显示，类似于博客文章的预览功能。PageDown是用JavaScript实现的由文本到Html的转换程序，而Flask-pagedown是对PageDown的一个封装，把其集成到了Flask-WTF表单中。

二、Flask-PageDown的引入和初始化

        在flask的工厂函数中，我们引入并flask程序初始化Flask-pagedown，这样我们可以直接在模板文件中使用有Flask-pagedown定义的变量：

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

三、创建博客表单

        使用Flask-PageDown的自动转换html功能，我们需要将博客的内容字段定义成Flask-PageDown的PageDownFiled，这样我们在渲染的html文件中就可以使用之前创建的pagedown对象，调用其include_pagedown()方法，自动在PageDownFiled渲染区域的下方显示预览的博客文章的内容。

        定义的表单类如下：

from flask_pagedown.fields import PageDownField

class PostForm(FlaskForm):
    body=PageDownField("Your post",validators=[DataRequired()])
    submit=SubmitField('Submit')

        在html模板文件中进行表单对象的渲染，以及添加预览功能：

<form method="POST">  
    {{form.hidden_tag()}}  
    <p>{{form.body.label}}</p>
    {{form.body()}}  
    {{ form.submit()}}
    {{ pagedown.include_pagedown() }}
</form>  
	

        实现的效果如下：

Github位置：
https://github.com/HymanLiuTS/flaskTs
克隆本项目：
Git  clone  Git @github.com:HymanLiuTS/flaskTs.Git
获取本文源代码：
Git checkout FL37