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. CentOS5/6/7系统下搭建安装Amabari大数据集群时出现SSLError: Failed to connect. Please check openssl library versions.错误的解决办法（图文详解）

    不多说,直接上干货! ========================== Creating target directory... ========================== Comman ...

  2. Linux安全配置

    注释掉系统不需要的用户和用户组 vi /etc/passwd #adm:x:3:4:adm:/var/adm:/sbin/nologin #lp:x:4:7:lp:/var/spool/lpd:/sb ...

  3. vue 路由 及 跳转传递参数的总结

    博客地址:https://ainyi.com/4 vue-router vue-router 是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基 ...

  4. NLP入门（四）命名实体识别（NER）

      本文将会简单介绍自然语言处理(NLP)中的命名实体识别(NER).   命名实体识别(Named Entity Recognition,简称NER)是信息提取.问答系统.句法分析.机器翻译等应用领 ...

  5. NLP入门（一）词袋模型及句子相似度

      本文作为笔者NLP入门系列文章第一篇,以后我们就要步入NLP时代.   本文将会介绍NLP中常见的词袋模型(Bag of Words)以及如何利用词袋模型来计算句子间的相似度(余弦相似度,cosi ...

  6. npm install -g @angular/cli@latest 失败

    一开始的ERROR信息是 error "@angular/compiler-cli" package was not properly installed 尝试方案二时又出现了以下 ...

  7. [转]How To Send Transactional Email In A NodeJS App Using The Mailgun API

    https://www.npmjs.com/package/mailgun-js 本文转自:https://www.mailgun.com/blog/how-to-send-transactional ...

  8. c# 大批量用户访问数据库报错

    报错信息:There is already an open DataReader associated with this Connection which must be closed first ...

  9. 人工智能第三课：数据科学中的Python

    我用了两天左右的时间完成了这一门课<Introduction to Python for Data Science>的学习,之前对Python有一些基础,所以在语言层面还是比较顺利的,这门 ...

  10. c#等程序中的关于时间的最大值【DateTime.MaxValue】和最小值【DateTime.MinValue】

    运行之后得到的结果 c# DateTime.MaxValue:// :: DateTime.MinValue:// :: Sql Server DateTime 类型必须介于 1/1/1753 12: ...