flask后台快速集成ckeditor编辑器：flask-ckeditor
jopen
10年前
flask后台快速集成ckeditor编辑器
flask
一个轻量、可扩展、强大的python web 框架
官方文档: http://flask.pocoo.org/docs/
代码仓库: https://github.com/mitsuhiko/flask.git
ckeditor
The best web text editor for everyone
官方网站: http://ckeditor.com/
代码仓库: https://github.com/ckeditor/ckeditor-dev.git
flask-ckeditor
双剑合并
使用
准备
1. clone 这个仓库到本地 2. 将 ckeditor 目录放置在 flask 项目的 static 目录下 3. 在 static 目录下建立 upload 目录
安装
pip install flaskckeditor
集成
1. 在希望集成的html头部引入js文件
<script src="{{url_for('static', filename='ckeditor/ckeditor.js')}}"></script> 2. 将被替换的表单的class属性设为ckeditor,添加替换脚本
<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. 开启上传（图片、文件）接口
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: 上传路由
<pre>@app.route('/ckupload/') def ckupload(): form = EditForm() response = form.upload(endpoint=app) return response</pre>现在访问对应html的路由，你会看到漂亮的CKEditor编辑器，并且可以使用它上传文件和图片：）
具体可参见示例程序: examples/app
使用蓝本
在大型应用中经常会使用蓝本，在蓝本视图中集成CKEditor的步骤和app视图基本相同。
1. 创建蓝本时需指明蓝本static目录的绝对路径
demo = Blueprint('demo', static_folder="/path/to/static") 2. 对应url需加上蓝本端点
<script src="{{url_for('.static', filename='ckeditor/ckeditor.js')}}"></script> <script type="text/javascript"> CKEDITOR.replace( "ckeditor_demo", { filebrowserUploadUrl: './ckupload/' } ); </script> 3. 设置endpoint端点值
response = form.upload(endpoint=demo)
具体可参见示例程序: examples/blueprint
API
CKEditor 类：
gen_rnd_filename() 函数
依据时间生成上传文件的随机文件名
upload(endpoint='') 函数
实现 ckeditor 上传功能
endpoint: 视图函数的端点名，针对蓝图的使用