首页 > > 网络编程 > 其它 >

HandyEditor 富文本编辑器整合到python flask项…

2018-07-28 06:20:54来源：博客园阅读 ()

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

 1 from flask import Flask
 2 from flask import request
 3 from flask import render_template
 4 from werkzeug import secure_filename
 5 import time
 6 
 7 
 8 UPLOAD_FOLDER = '/static/uploadPhotos/'
 9 ALLOWED_EXTENSIONS = set(['png', 'jpg', 'jpeg', 'gif'])
10 app = Flask(__name__)
11 
12 
13 def allowed_file(filename):
14     return '.' in filename and \
15 filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS
16 
17 
18 @app.route('/')
19 def index():
20     return 'hello world'
21 
22 
23 @app.route('/edit/')
24 def edit():
25     return render_template('edit.html')
26 
27 
28 @app.route('/uploadPhoto/',methods=['POST'])
29 def uploadPhoto():
30     '''
31         the photo which I upload name 'file'
32     '''
33     
34     if hasattr(request,'files') and 'file' in request.files:
35     
36         
37         file = request.files['file']
38         if file and allowed_file(file.filename):
39             filename = secure_filename(file.filename)
40             dotPos = filename.rindex('.')
41             filename = str(int(time.time()))+'.'+filename[dotPos+1:]
42             file.save(app.root_path+UPLOAD_FOLDER + filename)
43             return UPLOAD_FOLDER + filename
44         else:
45             return 'your file uploaded had ploblem'
46         
47     else:
48         return 'file which name \'file\' not exists'
49     
50 
51 if __name__ == '__main__':
52     app.run(host='0.0.0.0',debug=True)

代码解析：

　　编辑器页面在路由 /edit/

　　处理post过来的图片在路由 /uploadPhoto/

6.模板文件edit.html

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3   <head>
 4     <meta charset="utf-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <title>HandyEditor</title>
 8     <style type="text/css">
 9     small{font-size: 14px;color: #aaa;}
10     pre{padding: 5px;background-color: #eee;}
11     .textcenter{text-align: center;}
12     </style>
13   </head>
14   <body>
15     <h1>HandyEditor <small>一款十分轻便且使用方便的所见即所得富文本web编辑器，由Catfish(鲶鱼) CMS官方开发</small></h1>
16 
17     <textarea id="editor" name="editor" rows="5" style="display: none;"></textarea>
18     <br>
19     <button onclick="getHtml()">获取HTML</button>&nbsp;&nbsp;
20     <button onclick="getText()">获取纯文本</button>
21     <br><br>
22     <script src="/static/HandyEditor/HandyEditor.min.js"></script>
23     <script type="text/javascript">
24       var he = HE.getEditor('editor',{
25     width : '1400px',
26      height : '400px',
27       autoHeight : true,
28       autoFloat : false,
29       topOffset : 0,
30       uploadPhoto : true,
31       uploadPhotoHandler : '/uploadPhoto/',
32       uploadPhotoSize : 0,
33       uploadPhotoType : 'gif,png,jpg,jpeg',
34       uploadPhotoSizeError : '不能上传大于××KB的图片',
35       uploadPhotoTypeError : '只能上传gif,png,jpg,jpeg格式的图片',
36       lang : 'zh-jian',
37       skin : 'HandyEditor',
38       externalSkin : '',
39       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']
40 
41     });
42 
43       function getHtml(){
44         alert(he.getHtml());
45       }
46       function getText(){
47         alert(he.getText());
48       }
49     </script>
50   </body>
51 </html>