在 Flask-Admin 中集成富文本編輯器 CKEditor

Flask-Admin 是一個後臺管理擴展，使用它能夠快速構建後臺管理系統（若是你不須要大量自定義修改的話）。好比你編寫了一個博客，爲程序建立了存儲博客文章、標籤、分類的數據庫模型類，通過一些簡單的設置，Flask-Admin 就能夠自動爲你生成一個管理後臺，能夠刪除、建立和編輯文章、標籤、分類記錄，示例以下：

你能夠閱讀 Flask-Admin 文檔來學習它的基本用法。

在 Flask-Admin 裏，默認使用普通的文本區域（<textarea>）來編輯長文本。藉助 Flask-CKEditor，你能夠很容易的爲 Flask-Admin 集成富文本編輯器 CKEditor。

首先安裝 Flask-CKEditor：

$ pip install flask-ckeditor複製代碼

下面是一個簡單的例子，其中的關鍵步驟已用註釋標出：

from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from flask_admin import Admin
from flask_admin.contrib.sqla import ModelView
from flask_ckeditor import CKEditor, CKEditorField  # 導入擴展類 CKEditor 和 字段類 CKEditorField

app = Flask(__name__)
app.config['SECRET_KEY'] = 'dev'
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///'

db = SQLAlchemy(app)
ckeditor = CKEditor(app)  # 初始化擴展

class Post(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(120))
    text = db.Column(db.Text)


# 自定義 Post 模型
class PostAdmin(ModelView):
    form_overrides = dict(text=CKEditorField)  # 重寫表單字段，將 text 字段設爲 CKEditorField
    create_template = 'edit.html'  # 指定建立記錄的模板
    edit_template = 'edit.html'  # 指定編輯記錄的模板

admin = Admin(app, name='Flask-CKEditor demo')
admin.add_view(PostAdmin(Post, db.session))

if __name__ == '__main__':
    app.run(debug=True)複製代碼

在模板文件夾裏，咱們建立一個 edit.html 文件（templates/edit.html），在這個文件裏重載 Flask-Admin 的編輯模板，加載 CKEditor 資源：

{% extends 'admin/model/edit.html' %} <!-- 聲明繼承 Flask-Admin 的模型編輯模板 -->

{% block tail %} <!-- 向父模板的 tail 塊內追加內容 -->
    {{ super() }}
    {{ ckeditor.load() }} <!-- 加載 CKEditor 的 JavaScript 文件，默認從 CDN 獲取 -->
{% endblock %}複製代碼

實際的編輯頁面效果以下圖所示：

完整的可運行的示例程序代碼能夠在這裏獲取到。

你能夠閱讀 Flask-Admin 文檔和 Flask-CKEditor 文檔瞭解更多進階用法。

附註：本文改寫自我在 Stack Overflow 上的這個回答。