用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



发布了301 篇原创文章 · 获赞 156 · 访问量 105万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览