ckeditor是目前最优秀的可见即可得网页编辑器之一，它采用javascript编写。具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点。它非常流行，互联网上很容易找到相关技术文档，国内许多web项目和大型网站均采用了ckeditor。
下载ckeditor访问ckeditor官方网站，进入下载页面，选择standard package（一般情况下功能足够用了），然后点击download ckeditor按钮下载zip格式的安装文件。如果你想尝试更多的功能，可以选择下载full package。
下载好ckeditor之后，解压到flask项目static/ckeditor目录即可。
在flask项目中使用ckeditor在flask项目中使用ckeditor只需要执行两步就可以了：
在《script》标签引入ckeditor主脚本文件。可以引入本地的文件，也可以引用cdn上的文件。使用ckeditor.replace()把现存的标签替换成ckeditor。示例代码：
a simple page with ckeditor
《script》
this is my textarea to be replaced with ckeditor.
《script》
// 用ckeditor替换
// 使用默认配置
ckeditor.replace(‘editor1’);
《script》
因为ckeditor足够优秀，所以第二步也可只为追加名为ckeditor的class属性值，ckeditor就会自动将其替换。例如：
a simple page with ckeditor
《script》
this is my textarea to be replaced with ckeditor.
ckeditor脚本文件也可以引用cdn上的文件，下面给出几个参考链接：
《script》
基础版（迷你版）
《script》
标准版
《script》
完整版开启上传功能默认配置下，ckeditor是没有开启上传功能的，要开启上传功能，也相当的简单，只需要简单修改配置即可。下面来看看几个相关的配置值：
filebrowseruploadurl ：文件上传路径。若设置了，则上传按钮会出现在链接、图片、flash对话窗口。
filebrowserimageuploadurl ： 图片上传路径。若不设置，则使用filebrowseruploadurl值。
filebrowserflashuploadurl ： flash上传路径。若不设置，则使用filebrowseruploadurl值。
为了方便，这里我们只设置filebrowseruploadurl值，其值设为/ckupload/（后面会在flask中定义这个url）。
设置配置值主要使用2种方法：
方法1：通过ckeditor根目录的配置文件config.js来设置:
ckeditor.editorconfig = function( config ) {
// …
// file upload url
config.filebrowseruploadurl = ‘/ckupload/’;
// …
};
方法2：将设置值放入作为参数放入ckeditor.replace():
《script》
ckeditor.replace(‘editor1’, {
filebrowseruploadurl: ‘/ckupload/’,
});
《script》
flask处理上传请求ckeditor上传功能是统一的接口，即一个接口可以处理图片上传、文件上传、flash上传。先来看看代码：
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 = “””
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文件上传之后，服务端返回html文件，html文件包含javascript脚本，js脚本会调用一个回调函数，若无错误，回调函数将返回的url转交给ckeditor处理。
这3个参数依次是：
ckeditorfuncnum : 回调函数序号。ckeditor通过url参数提交给服务端
url : 上传后文件的url
error : 错误信息。若无错误，返回空字符串
使用蓝本在大型应用中经常会使用蓝本，在蓝本视图中集成ckeditor的步骤和app视图基本相同。
1. 创建蓝本时需指明蓝本static目录的绝对路径
demo = blueprint(‘demo’, static_folder=”/path/to/static”)
2. 对应url需加上蓝本端点
《script》
ckeditor.replace(
“ckeditor_demo”, {
filebrowseruploadurl: ‘./ckupload/’
}
);
《script》
3. 设置endpoint端点值
response = form.upload(endpoint=demo)
更多python的flask框架中集成ckeditor富文本编辑器相关文章请关注php中文网！