目录

前文列表

扩展阅读

实现文章管理功能

该功能是在 ModelView 提供 CRUD 管理的基础上实现, 但是仍然存在一个问题, 就是 Flask-Admin 默认使用的文本编辑字段为 textarea, 这无法满足博客文章的样式需求. 所以我们这次来看看怎样替换一个默认的字段类型.

• 创建一个新的字段类型
  vim jmilkfansblog/forms.py

from wtforms import (    widgets,    StringField,    TextField,    TextAreaField,    PasswordField,    BooleanField,    ValidationError)class CKTextAreaField(TextAreaField):    """Create a new Field type."""    # Add a new widget `CKTextAreaField` inherit from TextAreaField.    widget = CKTextAreaWidget()class CKTextAreaWidget(widgets.TextArea):    """CKeditor form for Flask-Admin."""    def __call__(self, field, **kwargs):        """Define callable type(class)."""        # Add a new class property ckeditor: ``        kwargs.setdefault('class_', 'ckeditor')        return super(CKTextAreaWidget, self).__call__(field, **kwargs)

NOTE 1: 新建的 CKTextAreaField 字段类型继承了 TextAreaField, 唯一的区别在于, CKTextAreaField 增加了一个 widget 的小部件, widget 的意义在于为该字段的 HTML 标签增加一个 class EG. <input class=ckedior ...>.

NOTE 2: widget 是由 class CKTestAreaWidget 返回的, 该类作为的唯一一件事情就是将 HTML 标签中的 class 的值设定为 ckedior, EG. <textarea name="editor" id="editor" class="ckeditor" rows="10" cols="80"> 这样的话, Ckeditor 就会将原默认的 TextArea(editor) 给替换掉.

• 定义一个 PostView 类
  vim jmilkfansblog/controllers/admin.py

class PostView(CustomModelView):    """View function of Flask-Admin for Post create/edit Page includedin Models page"""    # Using the CKTextAreaField to replace the Field name is `test`    form_overrides = dict(text=CKTextAreaField)    # Using Search box    column_searchable_list = ('text', 'title')    # Using Add Filter box    column_filters = ('publish_date',)    # Custom the template for PostView    # Using js Editor of CKeditor    create_template = 'admin/post_edit.html'    edit_template = 'admin/post_edit.html'

NOTE 1: form_overrides 指定使用新的字段类型 CKTextAreaField 替换原来的 TextAreaField.

NOTE 2: column_searchable_list 指定一个搜索框, 和搜索的范围为 post.text/post.title

NOTE 3: column_filters 指定一个过滤器, 筛选更加精确的值

NOTE 4: create_template/edit_template 指定自定义模板文件

• 创建自定义模板
  vim jmilkfansblog/templates/admin/post_edit.html

{% extends 'admin/model/edit.html' %}{% block tail %}{
     { super() }}{% endblock %}

NOTE 1: 该自定义模板继承了 admin/model/edit.html, 但却替换了

{% block tail %} 为一个 CKEditor.

实现效果

• 文章列表

  

• 创建/编辑文章