Flask render_template 崁入Ckeditor 4.5.3 編輯器並上傳圖片

woff · 發表於昨天 18:03

在網域上要用ckeditor,要上傳圖片變成了很困難的事
於是不停地嘗試，終於找到適合的語法
用了線上版的 ckeditor 4.5.3

建立ckeditor_test.py
存檔路徑 static/upload

from flask import request,url_for,render_template, make_response
import os
import datetime
import random
app.config['CKEDITOR_FILE_UPLOADER'] = os.path.join(os.path.dirname(__file__), 'static/upload')
@app.route('/ckeditor_test')
def ckeditor_test():
return render_template("public/ckeditor_test.html")
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', 'OPTIONS'])
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.config['CKEDITOR_FILE_UPLOADER'], 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

複製代碼

ckeditor 4.5.3分為standard, basic, full版本

建立 ckeditor_test.html (full版本)
改這裡

<script src="https://cdn.ckeditor.com/4.5.3/full/ckeditor.js"></script>

複製代碼

展示圖：
full版本點圖片標誌就可以上傳圖片

basic版本

standard版本

賬號		自動登錄	找回密碼
密碼			註冊

[教學] Flask render_template 崁入Ckeditor 4.5.3 編輯器並上傳圖片