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 ...
随机推荐
- Redis主从+KeepAlived实现高可用
Redis是我们当下比较流行使用的非关系数据库,可支持多样化的数据类型,多线程高并发支持,redis运行在内存拥有更快的读写.因为redis的表现如此出色,如何能保障redis在运行中能够应对宕机故障 ...
- ASP.NET Core 2.1 使用Docker运行
重要提示,本文为 ASP.NET Core 2.1 如果你是 2.2 那么请将文中的镜像换为 microsoft/dotnet:2.2.0-aspnetcore-runtime 即可,其他操作一样 1 ...
- sql server 备份与恢复系列三 简单恢复模式下的备份与还原
一.概述 前面讲了备份的一些理论知识,这篇开始讲在简单恢复模式下的备份与还原.在简单模式下是不能做日志备份的,发生灾难后,数据库最后一次备份之后做的数据修改将是全部丢失的,所以在生产环境下,数据又很重 ...
- ReentrantLock 详解
ReentrantLock的功能是实现代码段的并发访问控制,也就是通常意义上所说的锁,java中实现锁有两种方式,一种是本文所提的ReentrantLock,另一种是synchronized.Reen ...
- html2canvas关于图片不能正常截取
问题 首先说说遇到了什么问题.首先有这么一个需求.需要前端根据后端传过来数据,动态的生成图片.图片中的文案.背景图片.用户头像全部都是通过后端的接口获取.但是使用 html2canvas 生成的can ...
- Apache-Flink深度解析-概述
摘要: Apache Flink 的命脉 "命脉" 即生命与血脉,常喻极为重要的事物.系列的首篇,首篇的首段不聊Apache Flink的历史,不聊Apache Flink的架构, ...
- Tomcat8源码笔记(八)明白Tomcat怎么部署webapps下项目
以前没想过这么个问题:Tomcat怎么处理webapps下项目,并且我访问浏览器ip: port/项目名/请求路径,以SSM为例,Tomcat怎么就能将请求找到项目呢,项目还是个文件夹类型的? Tom ...
- 【Vue.js】vue引入组件报错：该组件未注册？
[Vue warn]: Unknown custom element: <QuestionnaireOption> - did you register the component cor ...
- go基础系列：简介
1.Go简介 Go语言是编译型.静态类型的类C的语言,并带有GC(垃圾收集器,garbage collection).这意味着什么? 另外,Go是一种非常严格的语言,它几乎总是要求我们"以标 ...
- NLP入门（四）命名实体识别（NER）
本文将会简单介绍自然语言处理(NLP)中的命名实体识别(NER). 命名实体识别(Named Entity Recognition,简称NER)是信息提取.问答系统.句法分析.机器翻译等应用领 ...