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>&nbsp;&nbsp;

     <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项目中的更多相关文章

  1. Vue CLI 3+tinymce 5富文本编辑器整合

    基于Vue CLI 3脚手架搭建的项目整合tinymce 5富文本编辑器,vue cli 2版本及tinymce 4版本参考:https://blog.csdn.net/liub37/article/ ...

  2. 「newbee-mall新蜂商城开源啦」 页面优化，最新版 wangEditor 富文本编辑器整合案例

    大家比较关心的新蜂商城 Vue3 版本目前已经开发了大部分内容,相信很快就能够开源出来让大家尝鲜了,先让大家看看当前的开发进度: 开源仓库地址为 https://github.com/newbee-l ...

  3. 15、Vue CLI 3+tinymce 5富文本编辑器整合

    富文本编辑器里大佬们都说tinymce NB! 插件安装 inymce官方提供了一个vue的组件tinymce-vue 如果有注册或购买过服务的话,直接通过组件配置api-key直接使用,懒的注册或者 ...

  4. 百度富文本编辑器整合fastdfs文件服务器上传

    技术:springboot+maven+ueditor   概述 百度富文本整合fastdfs文件服务器上传 详细 代码下载:http://www.demodashi.com/demo/15008.h ...

  5. tinymce富文本编辑器整合到django

    第一步:定义表存图片路径 models.py class AdminIMG(models.Model):     filename = models.CharField(max_length=200, ...

  6. 一款纯HTML+CSS+JS富文本编辑器-handyeditor

    官网:http://he.catfish-cms.com/ 修改版本(修改一些BUG和图片上传服务器 点击下载: handyeditor富文本编辑器.zip): 图片上传接口上传类型: Content ...

  7. 14flask 渲染富文本编辑器

    转载一个flask 渲染富文本编辑器: https://blog.csdn.net/qq_32198277/article/details/53355249 这里会产生一个问题: 通过富文本编辑器的数 ...

  8. 浅谈layer.open的弹出层中的富文本编辑器为何不起作用！

    很多童鞋都喜欢用贤心的layui框架.是的,我也喜欢用,方便,简单.但是呢,有时候项目中的需求会不一样,导致我们用的时候,显示效果可能会不一样,好吧.这样的话,个别遇到的问题总是解决不好,但是呢还是那 ...

  9. bbs项目富文本编辑器实现上传文件到media目录

    media目录是在project的settings中设置的,static目录是django自己使用的静态文件的上传目录,media目录是用户自定义上传文件的目录 # Django用户上传的文件都放在m ...

随机推荐

  1. 拿到BAT等大厂offer以后，我发现了关于秋招的一些真相

    关于秋招的一些真相 ​ 微信公众号[程序员江湖] 作者陆小凤,985 软件硕士,阿里 Java 研发工程师,在技术校园招聘.自学编程.计算机考研等方面有丰富经验和独到见解,目前致力于分享程序员干货和学 ...

  2. "i=i++"在java等高级语言的解释

    前言 最近学习我在的团队招人,面试.我出了一道c的题. int main(){ ; i+=++i; printf("%d",i); } 别喷!今晚学长们说,java,c#中完全不同 ...

  3. IT十年经典书籍

    摘自网络,近来在浏览时,发现一个叫做“IT十年经典书籍”的主题.google了一下,实在找不出这个主题的源头出处.不过这个主题中所涉及的每一本书讲出来都是振聋发聩的,大可以作为它那个行业的经典了.  ...

  4. centos7非centos标准服务 /etc/init.d/service_name start || stop 启动异常

    公司自己写的java程序,在centos7系统执行/etc/init.d/service_name start||stop的时候报错: grafana二次开发的程序 [root@docp1 init. ...

  5. ES6躬行记（10）——正则表达式

    在ES5中,如果使用构造函数RegExp()初始化RegExp对象(即正则表达式),并且它的第一个参数是正则表达式时,那么不允许再传入标志字符串(即第二个参数).而ES6更改了这项限制,如果传入了第二 ...

  6. Python 与 Javascript 之比较

    最近由于工作的需要开始开发一些Python的东西,由于之前一直在使用Javascript,所以会不自觉的使用一些Javascript的概念,语法什么的,经常掉到坑里.我觉得对于从Javascript转 ...

  7. jquery调用javascript方法

    本来想找个“优雅”一点的方法,类似C#在调用C++方法时候的Invoke之类的.没找到,后来想想,其实也没必要,直接写就好了,算最优雅了吧.只是少了VS的Intelligence,有点不习惯罢了. 事 ...

  8. μC/OS-II 任务的同步与通信 --- 信号量

    任务间通信 系统中的多个任务在运行时,经常需要互相无冲突地访问同一个共享资源,或者需要互相支持和依赖,甚至有时还要互相加以必要的限制和制约,才保证任务的顺利运行.因此,操作系统必须具有对任务的运行进行 ...

  9. 分布式系统监视zabbix讲解八之自动发现/自动注册--技术流ken

    自动发现(LLD) 概述 自动发现(LLD)提供了一种在计算机上为不同实体自动创建监控项,触发器和图形的方法.例如,Zabbix可以在你的机器上自动开始监控文件系统或网络接口,而无需为每个文件系统或网 ...

  10. 分布式系统监视zabbix讲解一之zabbix安装--技术流ken

    zabbix概述 Zabbix是什么 Zabbix 是由Alexei Vladishev创建,目前由Zabbix SIA在持续开发和支持. Zabbix 是一个企业级的分布式开源监控方案. Zabbi ...