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. VueJs(14)---理解Vuex

    理解Vuex 一.Vuex 是什么? 首先我们来分析一种实际开发中用vue.js的场景,你有n个组件,当你改变一个组件数据的时候需要同时改变其它n个组件的数据,那么我想你可能会对 vue 组件之间的通 ...

  2. 使用IntelliJ IDEA新建Java Web后端resfulAPI模板

    初始化项目 打开IntelliJ IDEA,我的版本是Version 2018.1.4.点击Create New Project.在左侧的列表中选择Maven.然后在右侧勾选Create from a ...

  3. 从零开始学 Web 之 Vue.js（四）Vue的Ajax请求和跨域

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. 特征脸是怎么提取的之主成分分析法PCA

    机器学习笔记 多项式回归这一篇中,我们讲到了如何构造新的特征,相当于对样本数据进行升维. 那么相应的,我们肯定有数据的降维.那么现在思考两个问题 为什么需要降维 为什么可以降维 第一个问题很好理解,假 ...

  5. 利用Python测量滴水湖的水面面积

    美丽的滴水湖   美丽的滴水湖坐落在上海的东南角,濒临东海,风景秀丽,安静舒适,是旅游.恋爱的绝佳去处.笔者有幸去过一回,对那儿的风土人情留下了深刻的印象,如果有机会,笔者还会多去几次!   滴水湖是 ...

  6. Spring Boot入门（1）Hello World

    Spring Boot介绍   对于熟悉Spring的读者读者来说,想必也听说过Spring Boot的大名,Spring Boot旨在简化Spring的开发,它涉及了Spring的方方面面,是一个令 ...

  7. [转]chrome浏览器中 F12 功能的简单介绍

    本文转自:https://www.cnblogs.com/zhuzhubaoya/p/9758648.html chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己 ...

  8. DataTable和List互转

    /// <summary> /// list转datatable /// </summary> /// <typeparam name="T"> ...

  9. Linux配置2个或多个Tomcat同时运行

    一.问题说明今天操作Linux部署项目的时候,公司领导要求,只给一个服务器,但是有2个项目要部署,而且需要独立分开运行. 二.解决方法Linux配置两个或多个Tomcat,一个Tomcat对应部署一个 ...

  10. [android] 线性布局和布局的组合

    /****************2016年4月25日 更新******************************/ 知乎:对于开发者来说,Android 的开发者选项里有哪些实用的功能? 汤涛 ...