18.上传文件限制和使用富文本编辑器【完结篇】

本文是后端开发——Flask初体验专栏的最后一篇文章&＃xff0c;整个Q&A demo的简单框架其实已经建立起来了&＃xff0c;现在就是再优化、完善一些细节。
本文首先完善一下前文上传头像的部分&＃xff0c;增加上传文件的大小和格式限制&＃xff0c;其次把发布问答部分中&＃xff0c;问题的详细描述部分从普通的textarea修改为富文本编辑器TinyMCE&＃xff0c;这样可以在问题描述中添加各种格式的信息&＃xff0c;如代码、表格、列表、图片等。
最后&＃xff0c;整个demo已经上传到GitHub:QADemoByFlask&＃xff0c;欢迎大家访问、关注和交流。

首先在config.py中添加

MAX_CONTENT_LENGTH &＃61; 1 * 1024 * 1024

表示最大上传文件的限制是1MB&＃xff0c;添加完成即可&＃xff0c;Flask会自动处理&＃xff0c;如果上传的文件超出&＃xff0c;会抛出异常&＃xff0c;显示无法连接&＃xff0c;但程序不会中断&＃xff1b;其次在exts.py中添加函数&＃xff1a;

def allowed_file(filename):return &＃39;.&＃39; in filename and \filename.rsplit(&＃39;.&＃39;, 1)[1] in [&＃39;jpg&＃39;, &＃39;jpeg&＃39;, &＃39;png&＃39;, &＃39;gif&＃39;]

我们用这个来确保用户上传的文件是指定的4种扩展名的格式。再从werkzeug库中导出
secure_filename来检验文件名的安全性&＃xff0c;这一步也是十分必要的&＃xff0c;具体原因可参考Flask文档。此时视图函数修改如下&＃xff1a;

&＃64;app.route(&＃39;/user/avatar/&＃39;, methods&＃61;[&＃39;GET&＃39;, &＃39;POST&＃39;]) def avatar():if request.method &＃61;&＃61; &＃39;POST&＃39;:file &＃61; request.files[&＃39;avatar_upload&＃39;]if file and allowed_file(file.filename):filename &＃61; secure_filename(file.filename)base_path &＃61; path.abspath(path.dirname(__file__))filename &＃61; str(g.user.id) &＃43; &＃39;.&＃39; &＃43; filename.rsplit(&＃39;.&＃39;, 1)[1]file_path &＃61; path.join(base_path, &＃39;static&＃39;, &＃39;images&＃39;, &＃39;uploads&＃39;, filename)file.save(file_path)g.user.avatar_path &＃61; &＃39;images/uploads/&＃39; &＃43; filenamedb.session.commit()return render_template(&＃39;avatar.html&＃39;)

现在网上有许多富文本编辑器可供我们使用&＃xff0c;这里选择TinyMCE&＃xff0c;详情和文档可以浏览其官网。首先需要引用tinymce.min.js这个文件&＃xff0c;就像是用Bootstrap一样&＃xff0c;我们可以直接在线引用&＃xff0c;但会有个讨厌的提示&＃xff0c;如下图&＃xff1a;

因此我直接将其下载&＃xff08;开发版下载&＃xff09;到本地&＃xff0c;解压至项目的static文件夹&＃xff0c;同时下载汉化文件zh_CN.js&＃xff0c;放入langs文件夹&＃xff0c;文件夹结构如下&＃xff1a;

然后在static/Javascript文件夹中新建一个tinymce_setup.js文件&＃xff0c;用于配置TinyMCE&＃xff0c;其内容如下&＃xff1a;

tinymce.init({selector: &＃39;#tinymce-content&＃39;,language:&＃39;zh_CN&＃39;,height:200,plugins: [&＃39;advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker&＃39;,&＃39;searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking&＃39;,&＃39;save table contextmenu directionality emoticons template paste textcolor&＃39;,&＃39;codesample&＃39;,],toolbar: &＃39;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&＃39;,nonbreaking_force_tab: true, });

代码中selector其实就是css中的选择器&＃xff0c;会把对应的html元素替换成TinyMCE富文本编辑器&＃xff0c;plugins和toolbar是设定编辑器带有哪些功能和按钮。此时可以在question.html中引入TinyMCE的js和配置文件的js&＃xff0c;如下&＃xff1a;