在 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 上的回答(https://stackoverflow.com/a/46481343/5511849)。