标签归档:Flask-Admin

在 Flask-Admin 中集成富文本编辑器 CKEditor

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)。