富文本编辑器上传word文档（富文本编辑器上传图片怎么存储）



本文介绍如何在Flask项目中集成富文本编辑器UEditor，并实现文件上传、图片上传、视频上传及涂鸦功能。

[TOC]

UEditor是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。

由于1.4.2版本之后的版本与之前版本存在较大的差异，本文以1.4.3版本为蓝本。

具体文档参见：http://fex-team.github.io/ueditor/

下载UEditor：

访问UEditor首页，下载1.4.3 PHP UTF-8版本的UEditor，并解压到Flask应用程序的目录。解压之后的目录结构是这样的：

表示目录。

在项目中加入UEditor：

我们在Flask应用程序的目录新建一个文件（可根据实际情况选择文件名，或者把代码加入需要使用UEditor的文件）：

在head标签加入下面几行：

在body标签加入：

请求路径配置：

UEditor 1.4.2+ 起，推荐使用统一的请求路径，在部署好前端代码后，需要修改 里的 参数（或者初始化时指定，见上面的代码），改成 。

UEditor初始化时，会向后端请求配置文件，后端收到请求后返回JSON格式的配置文件。具体实现参照后面的代码。

详细配置内容参见文档。

创建Flask应用程序（）：

应用程序运行之后，我们访问 就可以看到UEditor编辑器了，上图：

与后台通信的功能列表:

• 上传图片
• 拖放图片上传、粘贴板图片上传
• word文档图片转存
• 截图工具上传
• 上传涂鸦
• 上传视频
• 上传附件
• 在线图片管理
• 粘贴转存远程图片

统一请求格式说明:

• 前端请求通过唯一的后台文件 处理前端的请求
• 通过GET上的参数，判断是什么类型的请求
• 省去不必要的请求，去除涂鸦添加背景的请求，用前端FileReader读取本地图片代替
• 请求返回数据的格式，常规返回json字符串，数据包含state属性（成功时返回'SUCCESS'，错误时返回错误信息）。
• 请求支持jsonp请求格式，当请求有通过GET方式传callback的参数时，返回json数据前后加上括号，再在前面加上callback的值，格式类似这样：

详细说明：http://fex-team.github.io/ueditor/#dev-request_specification

由于接口升级，编辑器初始化时，首先会向后端请求配置信息，后端收到请求后，返 回相应的配置信息即可。

请求参数:

返回格式:

主要功能代码：

图片上传包括：本地图片上传、拖拽图片上传、粘贴板图片上传。

这些功能实现的方法是一样的，所以放到一起来讲。上传的文件可用获取。

请求参数:

action说明：

• uploadimage 上传图片
• uploadvideo 上传视频文件
• uploadfile 上传附件（文件）

返回格式:

主要功能代码：

涂鸦功能上传经过BASE64编码的图片（一般为PNG格式），可用获取，后端收到之后需要先解码，再保存。

请求参数:

返回格式:

主要功能代码：

远程抓图主要是把站外的图片保存到本地或者指定的图片服务器。

当复制粘贴其他网站的网页的图片时，会触发远程抓图功能。

远程图片列表可通过获取。这里暂时不清楚是 什么原因，为什么 为空。

核心思路：遍历远程图片列表，通过urllib把图片下载并保存，下载完成之后按照格 式返回结果。

请求参数:

返回格式:

Flask UEditor完整DEMO：https://coding.net/u/wtx358/p/flask-ueditor-demo/git

实现了图片上传、附件上传、视频上传、涂鸦、远程抓图等功能。

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/rfx/31949.html