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 ...
随机推荐
- Chapter 4 Invitations——4
I wanted very much to talk to him, and the day after the accident I tried. 在发生事故之后我尽力尝试,我很想和他聊聊. The ...
- [转]java中作用域public private protected 以及不写的区别
在说明这四个关键字之前,我想就class之间的关系做一个简单的定义,对于继承自己的class,base class可以认为他们都是自己的子女,而对于和自己一个目录下的classes,认为都是自己的朋友 ...
- Spring Cloud Gateway中异常处理
最近我们的项目在考虑使用Gateway,考虑使用Spring Cloud Gateway,发现网关的异常处理和spring boot 单体应用异常处理还是有很大区别的.让我们来回顾一下异常. 关于异常 ...
- ES6躬行记（2）——扩展运算符和剩余参数
扩展运算符(Spread Operator)和剩余参数(Rest Parameter)的写法相同,都是在变量或字面量之前加三个点(...),并且只能用于包含Symbol.iterator属性的可迭代对 ...
- JavaScript中常见的十五种设计模式
在程序设计中有很多实用的设计模式,而其中大部分语言的实现都是基于“类”. 在JavaScript中并没有类这种概念,JS中的函数属于一等对象,在JS中定义一个对象非常简单(var obj = {}), ...
- 【Go】slice的一些使用技巧
原文链接:https://blog.thinkeridea.com/201901/go/slice_de_yi_xie_shi_yong_ji_qiao.html slice 是 Go 语言十分重要的 ...
- [PKUWC2018] Minimax
Description 给定一棵 \(n\) 个节点的树,每个节点最多有两个子节点. 如果 \(x\) 是叶子,则给定 \(x\) 的权值:否则,它的权值有 \(p_x\) 的概率是它子节点中权值的较 ...
- 翻译：replace into语句(已提交到MariaDB官方手册)
本文为mariadb官方手册:REPLACE INTO的译文. 原文:https://mariadb.com/kb/en/replace/ 我提交到MariaDB官方手册的译文:https://mar ...
- Flask入门第二天
一.请求钩子 在客户端和服务器交互的过程中,有些准备工作或稍微工作是需要处理的,比如:在请求开始时,建立数据库连接:在请求开始时,根据需求进行权限校验:在请求结束时,指定数据的交互格式等.为了让每个视 ...
- Docker端口映射及创建镜像演示（二）--技术流ken
前言 在上一篇博客<Docker介绍及常用操作演示--技术流ken>中,已经详细介绍了docker相关内容以及有关镜像和容器的使用命令演示. 现在我们已经可以自己下载镜像,以及创建容器了. ...