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 ...
随机推荐
- MySQL(1)---索引
索引 什么是索引? 索引是帮助Mysql提高获取数据的数据结构,换一句话讲就是“排好序的快速查找的数据结构”. 一.索引的分类 MySQL主要的几种索引类型:1.普通索引.2.唯一索引.3.主键索引 ...
- 课程回顾-Convolutional Neural Networks
为什么卷积层计算量更低paddingStrided convolution多维卷积LeNet 参数卷积网络的好处参数共享稀疏连接经典网络实现LeNet-5AlexNetVGGResNet残差块iden ...
- sql server 备份与恢复系列一 必备知识
一.备份概述 数据安全是数据库的生命,数据库在使用过程中难免会遇到如:使用者的误操作或是被恶意修改,硬件故障导致数据文件无法被访问,自然灾害导致机房在物理上的损毁.本章从备份与恢复的功能作为解决问题的 ...
- 【原创】ucos信号量的操作及原理
信号量的操作及原理 1.OSSemCreate创建信号量semaphore 在使用信号量之前,要先用OSSemCreate创建一个信号量,并通过返回的合法事件结构体指针使用信号量. OS_ ...
- 【InfluxDB】InfluxDB学习实践笔记
InfluxDB是用Go编写的一个开源分布式时序.事件和指标数据库,无需外部依赖.它与Elasticsearch.Graphite等类似.比较适用于与事件紧密相关的数据,例如实时日志数据.实时监控数据 ...
- 详细介绍MySQL/MariaDB的锁
官方手册:https://dev.mysql.com/doc/refman/5.7/en/innodb-locking-transaction-model.html 1.事务提交的方式 在MariaD ...
- Flask入门第二天
一.请求钩子 在客户端和服务器交互的过程中,有些准备工作或稍微工作是需要处理的,比如:在请求开始时,建立数据库连接:在请求开始时,根据需求进行权限校验:在请求结束时,指定数据的交互格式等.为了让每个视 ...
- Jenkins凭证及任务演示-pipeline（二）--技术流ken
Jenkins前言 在上一篇博客<Jenkins持续集成介绍及插件安装版本更新演示(一)--技术流ken>中已经详细介绍了jenkins的插件安装以版本更新等,本篇博客将再深入探究jenk ...
- JQuery官方学习资料（译）：$( document ).ready()
一个页面直到document是”ready“才能被安全的操作,Jquery为你检查这种状态.代码包含在$( document ).ready()的内部将会仅仅运行一次在页面Document ...
- tomcat端口修改以及jvm启动参数设置
1.端口更改:找到config目录下server.xml文件 如下 <?xml version='1.0' encoding='utf-8'?> <!-- Licensed to t ...