CKEditor下载地址：https://ckeditor.com/ckeditor-4/download/
访问CKeditor官方网站，进入下载页面，选择Standard Package（一般情况下功能足够用了），如果你想尝试更多的功能，可以选择下载Full Package。
下载好CKeditor之后，解压到Flask项目static/ckeditor目录即可。
在Flask项目中集成CKEditor：
- 在
<scripts>标签中导入CKEditor - 使用
CKEDITOR.replace()把现存的<textarea>替换成CKEditor
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
{# 引入CKEditor#}
<script type="text/javascript" src="../static/js/ckeditor/ckeditor.js"></script>
</head>
<body>
<form method="post" action="{{ url_for('ckupload') }}" enctype="multipart/form-data">
<input type="text" name="subject" placeholder="主题">
<textarea name="content" id="content" placeholder="内容"></textarea>
<input type="submit" value="立即发布">
{# 替换textarea#}
<script type="text/javascript">
CKEDITOR.replace('content', {
{# 开启上传功能，配置上传路径#}
filebrowserUploadUrl: '/ckupload/',
});
</script>
</form>
</body>
</html>
Flask处理上传请求：
CKEditor上传功能是统一的接口，即一个接口可以处理图片上传、文件上传、Flash上传。先来看看代码：
from flask import Flask, render_template, request, make_response, url_for
from flask_script import Manager
import datetime
import os
import random
app = Flask(__name__)
manager = Manager(app)
def gen_rnd_filename():
filename_prefix = datetime.datetime.now().strftime('%Y%m%d%H%M%S')
return '%s%s' % (filename_prefix, str(random.randrange(1000, 10000)))
@app.route('/ckupload/', methods=['POST'])
def ckupload():
"""CKEditor file upload"""
error = ''
url = ''
callback = request.args.get("CKEditorFuncNum")
if request.method == 'POST' and 'upload' in request.files:
fileobj = request.files['upload']
fname, fext = os.path.splitext(fileobj.filename)
rnd_name = '%s%s' % (gen_rnd_filename(), fext)
filepath = os.path.join(app.static_folder, 'upload', rnd_name)
# 检查路径是否存在，不存在则创建
dirname = os.path.dirname(filepath)
if not os.path.exists(dirname):
try:
os.makedirs(dirname)
except:
error = 'ERROR_CREATE_DIR'
elif not os.access(dirname, os.W_OK):
error = 'ERROR_DIR_NOT_WRITEABLE'
if not error:
fileobj.save(filepath)
url = url_for('static', filename='%s/%s' % ('upload', rnd_name))
else:
error = 'post error'
res = """
<script type="text/javascript">
window.parent.CKEDITOR.tools.callFunction(%s, '%s', '%s');
</script>
""" % (callback, url, error)
response = make_response(res)
response.headers["Content-Type"] = "text/html"
return response
@app.route('/', methods=['POST', 'GET'])
def index():
return render_template('index.html')
if __name__ == '__main__':
manager.run()
再去看自己项目的目录，就可以找到/upload底下已经有自己上传的图片了。
原文：http://flask123.sinaapp.com/article/49/