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

xialong 发布于2019-07-30 15:32 / 719人阅读

摘要：本文首先完善一下前文上传头像的部分，增加上传文件的大小和格式限制，其次把发布问答部分中，问题的详细描述部分从普通的修改为富文本编辑器，这样可以在问题描述中添加各种格式的信息，如代码表格列表图片等。

本文是后端开发——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，如下：

其实还需要引入jQuery，但我们之前在引入Bootstrap的时候，在base.html中已经引入了，而question.html又继承自base.html。将question.html中的

替换为

此时再点击发布问答进入页面，已经可以使用TinyMCE了，如下：

随便插入张图片，点击提交试试，发现后端获取到的数据是带html标记的文本，数据库数据如下：

而detail.html中的内容也是这样的字符串：

如何把这样的内容渲染成html呢？其实很简单，给html中的参数加个safe过滤器就可以了：

{{ question.content | safe }}

此时detail.html中的图片就正常显示了：

云服务器 GPU云服务器富文本编辑器富文本web编辑器完结篇 php使用文本编辑器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/41312.html

django项目admin后台整合tinymce富文本编辑并自定义添加图片本地上传和富文本中的回显

摘要：选择该页面绑定的标签指定图片上传处理目录注其中为了显示为中文，标明了中文，同时需要下载语言包放到对应的文件夹下。前言我们常因为django的自带admin后台功能而选择该框架，但也因为其自动生成的特殊性而在做出特别的更改的时候束手束脚，鉴于项目已经采用了django，而后台要求能够直接上传富文本内容直接用于网页显示，定制性高，后来翻了目前较为知名的几款富文本编辑框，觉得还是tiny...

HackerShell 2019-08-21 17:29 评论0 收藏0
django项目admin后台整合tinymce富文本编辑并自定义添加图片本地上传和富文本中的回显

摘要：选择该页面绑定的标签指定图片上传处理目录注其中为了显示为中文，标明了中文，同时需要下载语言包放到对应的文件夹下。前言我们常因为django的自带admin后台功能而选择该框架，但也因为其自动生成的特殊性而在做出特别的更改的时候束手束脚，鉴于项目已经采用了django，而后台要求能够直接上传富文本内容直接用于网页显示，定制性高，后来翻了目前较为知名的几款富文本编辑框，觉得还是tiny...

Honwhy 2019-08-01 17:56 评论0 收藏0
django项目admin后台整合tinymce富文本编辑并自定义添加图片本地上传和富文本中的回显

摘要：选择该页面绑定的标签指定图片上传处理目录注其中为了显示为中文，标明了中文，同时需要下载语言包放到对应的文件夹下。前言我们常因为django的自带admin后台功能而选择该框架，但也因为其自动生成的特殊性而在做出特别的更改的时候束手束脚，鉴于项目已经采用了django，而后台要求能够直接上传富文本内容直接用于网页显示，定制性高，后来翻了目前较为知名的几款富文本编辑框，觉得还是tiny...

k00baa 2019-07-30 14:56 评论0 收藏0
手摸手，带你用vue撸后台系列三(实战篇)

摘要：社区的认可目前已经是相关最多的开源项目了，体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。完整项目地址：vue-element-admin 系类文章一：手摸手，带你用vue撸后台系列一(基础篇)系类文章二：手摸手，带你用vue撸后台系列二(登录权限篇)系类文章三：手摸手，带你用vue撸后台系列三(实战篇）系类文章四：手摸手，带你用vue撸后台系列...

Channe 2019-08-20 17:15 评论0 收藏0
手摸手，带你用vue撸后台系列三(实战篇)

摘要：社区的认可目前已经是相关最多的开源项目了，体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。完整项目地址：vue-element-admin 系类文章一：手摸手，带你用vue撸后台系列一(基础篇)系类文章二：手摸手，带你用vue撸后台系列二(登录权限篇)系类文章三：手摸手，带你用vue撸后台系列三(实战篇）系类文章四：手摸手，带你用vue撸后台系列...

zgbgx 2019-08-29 12:46 评论0 收藏0