您的位置：首页 > 其它

Flask学习10：Flask项目集成富文本编辑器CKEditor 上传图片

2018-01-03 11:05 507 查看

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 =
4000
"""

<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/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 文本编辑 ckeditor 图片 flask 富文本

相关文章推荐

新的分享

章节导航