HandyEditor 富文本编辑器整合到python flask项目中
1.下载HandyEditor，地址http://he.catfish-cms.com/
2.解压后的文件名HandyEditor-master改为HandyEditor，文件夹里的文件如下
3.将HandyEditor文件夹放到项目的static文件夹里，并在static里新建一个文件夹命名uploadPhotos，用于放上传的图片
4.修改有问题的HandyEditor.min.js，打开文件可以看到js代码没有格式化，先到http://tool.oschina.net/codeformat/ 进行格式化
5.我的flask入口文件是test.py
from flask import Flask
from flask import request
from flask import render_template
from werkzeug import secure_filename
import time UPLOAD_FOLDER = '/static/uploadPhotos/'
ALLOWED_EXTENSIONS = set(['png', 'jpg', 'jpeg', 'gif'])
app = Flask(__name__) def allowed_file(filename):
return '.' in filename and \
filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS @app.route('/')
def index():
return 'hello world' @app.route('/edit/')
def edit():
return render_template('edit.html') @app.route('/uploadPhoto/',methods=['POST'])
def uploadPhoto():
'''
the photo which I upload name 'file'
''' if hasattr(request,'files') and 'file' in request.files: file = request.files['file']
if file and allowed_file(file.filename):
filename = secure_filename(file.filename)
dotPos = filename.rindex('.')
filename = str(int(time.time()))+'.'+filename[dotPos+1:]
file.save(app.root_path+UPLOAD_FOLDER + filename)
return UPLOAD_FOLDER + filename
else:
return 'your file uploaded had ploblem' else:
return 'file which name \'file\' not exists' if __name__ == '__main__':
app.run(host='0.0.0.0',debug=True)
代码解析：
编辑器页面在路由 /edit/
处理post过来的图片在路由 /uploadPhoto/
6.模板文件edit.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HandyEditor</title>
<style type="text/css">
small{font-size: 14px;color: #aaa;}
pre{padding: 5px;background-color: #eee;}
.textcenter{text-align: center;}
</style>
</head>
<body>
<h1>HandyEditor <small>一款十分轻便且使用方便的所见即所得富文本web编辑器，由Catfish(鲶鱼) CMS官方开发</small></h1> <textarea id="editor" name="editor" rows="5" style="display: none;"></textarea>
<br>
<button onclick="getHtml()">获取HTML</button>
<button onclick="getText()">获取纯文本</button>
<br><br>
<script src="/static/HandyEditor/HandyEditor.min.js"></script>
<script type="text/javascript">
var he = HE.getEditor('editor',{
width : '1400px',
height : '400px',
autoHeight : true,
autoFloat : false,
topOffset : 0,
uploadPhoto : true,
uploadPhotoHandler : '/uploadPhoto/',
uploadPhotoSize : 0,
uploadPhotoType : 'gif,png,jpg,jpeg',
uploadPhotoSizeError : '不能上传大于××KB的图片',
uploadPhotoTypeError : '只能上传gif,png,jpg,jpeg格式的图片',
lang : 'zh-jian',
skin : 'HandyEditor',
externalSkin : '',
item : ['bold','italic','strike','underline','fontSize','fontName','paragraph','color','backColor','|','center','left','right','full','indent','outdent','|','link','unlink','textBlock','code','selectAll','removeFormat','trash','|','image','expression','subscript','superscript','horizontal','orderedList','unorderedList','|','undo','redo','|','html','|','about'] }); function getHtml(){
alert(he.getHtml());
}
function getText(){
alert(he.getText());
}
</script>
</body>
</html>
注意：上传图片需要uploadPhoto : true，因为在HandyEditor.min.js配置是!1
还有处理上传的图片所在的路由，uploadPhotoHandler : '/uploadPhoto/'
7.进行测试
附：
富文本编辑器上传图片用的是ajax文件异步上传，new FormData()，以后有时间再写一篇关于这个的文章
HandyEditor 富文本编辑器整合到python flask项目中的更多相关文章
- Vue CLI 3+tinymce 5富文本编辑器整合
基于Vue CLI 3脚手架搭建的项目整合tinymce 5富文本编辑器,vue cli 2版本及tinymce 4版本参考:https://blog.csdn.net/liub37/article/ ...
- 「newbee-mall新蜂商城开源啦」 页面优化，最新版 wangEditor 富文本编辑器整合案例
大家比较关心的新蜂商城 Vue3 版本目前已经开发了大部分内容,相信很快就能够开源出来让大家尝鲜了,先让大家看看当前的开发进度: 开源仓库地址为 https://github.com/newbee-l ...
- 15、Vue CLI 3+tinymce 5富文本编辑器整合
富文本编辑器里大佬们都说tinymce NB! 插件安装 inymce官方提供了一个vue的组件tinymce-vue 如果有注册或购买过服务的话,直接通过组件配置api-key直接使用,懒的注册或者 ...
- 百度富文本编辑器整合fastdfs文件服务器上传
技术:springboot+maven+ueditor 概述 百度富文本整合fastdfs文件服务器上传 详细 代码下载:http://www.demodashi.com/demo/15008.h ...
- tinymce富文本编辑器整合到django
第一步:定义表存图片路径 models.py class AdminIMG(models.Model): filename = models.CharField(max_length=200, ...
- 一款纯HTML+CSS+JS富文本编辑器-handyeditor
官网:http://he.catfish-cms.com/ 修改版本(修改一些BUG和图片上传服务器 点击下载: handyeditor富文本编辑器.zip): 图片上传接口上传类型: Content ...
- 14flask 渲染富文本编辑器
转载一个flask 渲染富文本编辑器: https://blog.csdn.net/qq_32198277/article/details/53355249 这里会产生一个问题: 通过富文本编辑器的数 ...
- 浅谈layer.open的弹出层中的富文本编辑器为何不起作用！
很多童鞋都喜欢用贤心的layui框架.是的,我也喜欢用,方便,简单.但是呢,有时候项目中的需求会不一样,导致我们用的时候,显示效果可能会不一样,好吧.这样的话,个别遇到的问题总是解决不好,但是呢还是那 ...
- bbs项目富文本编辑器实现上传文件到media目录
media目录是在project的settings中设置的,static目录是django自己使用的静态文件的上传目录,media目录是用户自定义上传文件的目录 # Django用户上传的文件都放在m ...
随机推荐
- 基于Electron+.NET Core的前后端分离的跨平台桌面应用
Web做界面比原生桌面界面开发速度真心要快很多,而且组件也多. 分析: 1..NET Core和Electron都是跨平台的. 2.NET Core做后端很方便,但是没有GUI,Electron做桌面 ...
- linux 命令 — lsof
lsof 列出打开的文件 输出 FD: 文件描述符,cwd表示应用程序当前工作目录,txt表示打开的是程序代码(二进制文件或者共享库),0标准输入,1标准输出,2错误流 TYPE:DIR目录,CHR字 ...
- 支付宝客户端架构解析：Android 容器化框架初探
摘要: 本文将介绍支付宝 Android 容器化框架设计的基本思路. 1. 前言 由本章节开始,我们将从支付宝客户端的架构设计方案入手,细分拆解客户端在“容器化框架设计”.“网络优化”.“性能启动优化 ...
- 你真的懂redis的数据结构了吗？redis内部数据结构和外部数据结构揭秘
Redis有哪些数据结构? 字符串String.字典Hash.列表List.集合Set.有序集合SortedSet. 很多人面试时都遇到过这种场景吧? 其实除了上面的几种常见数据结构,还需要加上数据结 ...
- MyBatis源码解析（十一）——Parsing解析模块之通用标记解析器（GenericTokenParser）与标记处理器（TokenHandler）
原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6724223.html 1.回顾 上面的几篇解析了类型模块,在MyBatis中类型模块包含的 ...
- 【leet-code】135. 加油站
题目描述 在一条环路上有 N 个加油站,其中第 i 个加油站有汽油 gas[i] 升. 你有一辆油箱容量无限的的汽车,从第 i 个加油站开往第 i+1 个加油站需要消耗汽油 cost[i] 升.你从其 ...
- Perl复制、移动、重命名文件/目录
File::Copy复制文件 File::Copy模块提供了copy函数和cp函数来复制文件,它们参数上完全一致,但行为上稍有区别. 用法大致如下: use File::Copy qw(copy cp ...
- Go标准库：深入剖析Go template
本文只关注Go text/template的底层结构,带上了很详细的图片以及示例帮助理解,有些地方也附带上了源码进行解释.有了本文的解释,对于Go template的语法以及html/template ...
- C# CLR via 对象内存中堆的存储【类型对象指针、同步块索引】
最近在看书,看到了对象在内存中的存储方式. 讲到了对象存储在内存堆中,分配的空间除了类型对象的成员所需的内存量,还有额外的成员(类型对象指针. 同步块索引 ),看到这个我就有点不懂了,不知道类型对象指 ...
- 46.Linux-创建rc红外遥控平台设备,实现重复功能(2)
上章链接:46.Linux-分析rc红外遥控平台驱动框架,修改内核的NEC解码函数BUG(1) 在上章分析了红外platform_driver后,已经修改bug后,接下来我们自己创建一个红外platf ...