一个轻量、可扩展、强大的python web 框架
官方文档: http://flask.pocoo.org/docs/
代码仓库: https://github.com/mitsuhiko/flask.git
The best web text editor for everyone
官方网站: http://ckeditor.com/
代码仓库: https://github.com/ckeditor/ckeditor-dev.git
双剑合并,😄
1. clone 这个仓库到本地
2. 将 ckeditor 目录放置在 flask 项目的 static 目录下
3. 在 static 目录下建立 upload 目录
pip install flaskckeditor
<script src="{{url_for('static', filename='ckeditor/ckeditor.js')}}"></script>
<form method="post">
{{ form.hidden_tag() }}
{{ form.ckeditor_demo(class='ckeditor') }}
<!-- 替换脚本 -->
<script type="text/javascript">
CKEDITOR.replace(
"ckeditor_demo", {
filebrowserUploadUrl: '/ckupload/'
}
);
</script>
<!---->
{{ form.submit }}
<form>
3.1: 在表单类中集成 CKEditor 类
from flaskckeditor import CKEditor
from flask.ext.wtf import Form
from wtforms import TextAreaField, SubmitField
......
class EditForm(Form, CKEditor):
ckeditor_demo = TextAreaField()
submit = SubmitField('提交')
3.2: 上传路由
@app.route('/ckupload/')
def ckupload():
form = EditForm()
response = form.upload(endpoint=app)
return response
现在访问对应html的路由,你会看到漂亮的CKEditor编辑器,并且可以使用它上传文件和图片:)
具体可参见示例程序: examples/app
在大型应用中经常会使用蓝本,在蓝本视图中集成CKEditor的步骤和app视图基本相同。
demo = Blueprint('demo', static_folder="/path/to/static")
<script src="{{url_for('.static', filename='ckeditor/ckeditor.js')}}"></script>
<script type="text/javascript">
CKEDITOR.replace(
"ckeditor_demo", {
filebrowserUploadUrl: './ckupload/'
}
);
</script>
response = form.upload(endpoint=demo)
具体可参见示例程序: examples/blueprint
依据时间生成上传文件的随机文件名
实现 ckeditor 上传功能
endpoint: 视图函数的端点名,针对蓝图的使用