本文是后端开发——Flask初体验专栏的最后一篇文章,整个Q&A demo
的简单框架其实已经创建起来了,如今就是再优化、完善一些细节。
本文首先完善一下前文上传头像的部分,增长上传文件的大小和格式限制,其次把发布问答部分中,问题的详细描述部分从普通的textarea
修改成富文本编辑器TinyMCE
,这样能够在问题描述中添加各类格式的信息,如代码、表格、列表、图片等。
最后,整个demo
已经上传到GitHub:QADemoByFlask,欢迎你们访问、关注和交流。javascript
首先在config.py
中添加css
MAX_CONTENT_LENGTH = 1 * 1024 * 1024
表示最大上传文件的限制是1MB,添加完成便可,Flask会自动处理,若是上传的文件超出,会抛出异常,显示没法链接,但程序不会中断;其次在exts.py
中添加函数:html
def allowed_file(filename): return '.' in filename and \ filename.rsplit('.', 1)[1] in ['jpg', 'jpeg', 'png', 'gif']
咱们用这个来确保用户上传的文件是指定的4种扩展名的格式。再从werkzeug
库中导出secure_filename
来检验文件名的安全性,这一步也是十分必要的,具体缘由可参考Flask文档。此时视图函数修改以下:java
@app.route('/user/avatar/', methods=['GET', 'POST']) def avatar(): if request.method == 'POST': file = request.files['avatar_upload'] if file and allowed_file(file.filename): filename = secure_filename(file.filename) base_path = path.abspath(path.dirname(__file__)) filename = str(g.user.id) + '.' + filename.rsplit('.', 1)[1] file_path = path.join(base_path, 'static', 'images', 'uploads', filename) file.save(file_path) g.user.avatar_path = 'images/uploads/' + filename db.session.commit() return render_template('avatar.html')
如今网上有许多富文本编辑器可供咱们使用,这里选择TinyMCE
,详情和文档能够浏览其官网。首先须要引用tinymce.min.js
这个文件,就像是用Bootstrap
同样,咱们能够直接在线引用,但会有个讨厌的提示,以下图:git
所以我直接将其下载(开发版下载)到本地,解压至项目的static
文件夹,同时下载汉化文件zh_CN.js
,放入langs
文件夹,文件夹结构以下:github
而后在static/javascript
文件夹中新建一个tinymce_setup.js
文件,用于配置TinyMCE
,其内容以下:数据库
tinymce.init({ selector: '#tinymce-content', language:'zh_CN', height:200, plugins: [ 'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker', 'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking', 'save table contextmenu directionality emoticons template paste textcolor', 'codesample', ], toolbar: 'insertfile undo redo | \ styleselect | \ bold italic | \ alignleft aligncenter alignright alignjustify | \ bullist numlist outdent indent | \ link image | \ print preview media fullpage | \ forecolor backcolor emoticons |\ codesample fontsizeselect fullscreen', nonbreaking_force_tab: true, });
代码中selector
其实就是css
中的选择器,会把对应的html
元素替换成TinyMCE
富文本编辑器,plugins
和toolbar
是设定编辑器带有哪些功能和按钮。此时能够在question.html
中引入TinyMCE
的js
和配置文件的js
,以下:flask
<script src="{{ url_for('static', filename='tinymce/js/tinymce/tinymce.js') }}"></script> <script src="{{ url_for('static', filename='javascript/tinymce_setup.js') }}"></script>
其实还须要引入jQuery
,但咱们以前在引入Bootstrap
的时候,在base.html
中已经引入了,而question.html
又继承自base.html
。将question.html
中的segmentfault
<div class="form-group"> <textarea class="form-control" rows="6" placeholder="问题描述" name="question_desc"></textarea> </div>
替换为后端
<div class="tinymce-group"> <textarea id="tinymce-content" name="question_desc"></textarea> </div>
此时再点击发布问答进入页面,已经可使用TinyMCE
了,以下:
随便插入张图片,点击提交试试,发现后端获取到的数据是带html
标记的文本,数据库数据以下:
而detail.html
中的内容也是这样的字符串:
如何把这样的内容渲染成html
呢?其实很简单,给html
中的参数加个safe
过滤器就能够了:
{{ question.content | safe }}
此时detail.html
中的图片就正常显示了: