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

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

---

首先在config.py中添加

MAX_CONTENT_LENGTH = 1 * 1024 * 1024

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

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

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

@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一样，我们可以直接在线引用，但会有个讨厌的提示，如下图：

因此我直接将其下载（开发版下载）到本地，解压至项目的static文件夹，同时下载汉化文件zh_CN.js，放入langs文件夹，文件夹结构如下：

然后在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，如下：

<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中的

<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中的图片就正常显示了：