flask后臺快速集成ckeditor編輯器：flask-ckeditor

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: 上傳路由

@app.route('/ckupload/')
def ckupload():
    form = EditForm()
    response = form.upload(endpoint=app)
    return response

現在訪問對應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: 視圖函數的端點名，針對藍圖的使用

項目主頁：http://www.baiduhome.net/lib/view/home/1441718532820