在 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 上的这个回答。