前言
flask-admin 算是一個很不錯的 flask 后台管理了,用它來做博客系統的管理后端再合適不過了,節約時間成本,避免重復造輪子,但是作為一個程序員,寫文章怎么可以沒有 markdown 呢? 現在讓我們嘗試一下讓 flask-admin 支持 markdown 吧.
實踐
Flask-PageDown
這個庫是對 Pagedown 的封裝,將其集成到了Flask-WTF表單中了。具體內容可以去它的 github 倉庫看一下: Flask-PageDown
優缺點
優點:
- 配置簡單
- 對 flask-admin 的改動較小
缺點:
- 無法實現對代碼的高亮
- 生成的編輯器是上下布局的,不太美觀
使用方法
安裝和配置
通過 pip 進行安裝:
pip install flask-pagedown
然后在項目中初始化:
from flask_pagedown import PageDown
app = Flask(__name__)
pagedown = PageDown(app)
當然也可以通過 init_app(app) 的方式進行初始化
from flask import Flask
from flask_pagedown import PageDown
pagedown = PageDown()
def create_app(config_name):
app = Flask(__name__, static_folder='static', static_url_path='')
app.config.from_object(config[config_name])
# 省略部分代碼
pagedown.init_app(app)
return app
這個編輯器還依賴兩個 js 文件,所以還需要在我們的對應的模板中添加進去相應的方法:
<html>
<head>
{{ pagedown.html_head() }}
</head>
<body>
...
</body>
</html>
默認情況下這兩個 js 是通過 CDN 加載的,也就意味着你的服務器需要可以訪問網絡,如果只想通過本地就可以訪問的話,很簡單把這兩個 js 文件下載下來,然后將 pagedown.html_head() 替換成兩個文件的本地路徑就可以了. 兩個文件的下載地址: Markdown.Converter,
Markdown.Sanitizer
新增自定義的 ModelView
flask-admin 支持自定義的 ModelView, 這是我們可以實現這個功能的基礎.
class PeachPostView(ModelView):
form_overrides = {
'content': PageDownField
}
def __init__(self, model, session, **kwargs):
super(PeachPostView, self).__init__(model, session, **kwargs)
# 省略部分代碼
最后在我們的 flask-admin 給我們需要 markdown 編輯器的 model 添加上自定義的 ModelView 就可以了.
# 省略部分代碼
admin.add_view(PeachPostView(Post, db.session, endpoint='AdminPost'))
完整代碼可以查看 use:使用 flask-pagedown 作為 markdown 編輯器
最終的效果圖:
使用開源的 markdown 編輯器
沒錯,這個方法就比較自由了,找自己喜歡的 markdown 編輯器然后集成進去. 這里我最終選擇了 [editor.md]
(https://github.com/pandao/editor.md.git) 這個開源編輯器,這個好像很久沒維護了,但是顏值挺高的了,就決定是它了.
優缺點
優點:
- 優點很明星,顏值高,滿足我對 markdown 的所有需求了,支持代碼高亮.
缺點:
- 對 flask-admin 的改動較多,需要自己寫的部分比較多.
使用方法
下載 editor.md 插件
插件下載很簡單,從官網上或者 github 上下載, 下載完成后,我這里將 editor.md 下載的文件保存到 static 的 plugin 的目錄下了.
覆蓋 flask-admin 原有文件
這里由於我們需要使用插件,所以我們需要對 flask-admin 原有的 create.html 和 edit.html 文件進行重寫.
- 在 templates 目錄下新建 admin 目錄
- 在 admin 目錄下創建 model 目錄, 並新增 peach-post-create.html, peach-post-edit.html 文件,將 flask-admin 對應的 create.html 和 edit.html 內容復制進去.
- 在 admin 目錄下新增 peach-base.html 和 peach-lib.html 文件,將 flask-admin 對應的 base.html 和 lib.html 文件復制進去
tip: 上述說所的 flask-admin 的內容,均在你的開發環境中找到 flask-admin 的庫所在目錄,然后需要復制的文件在: flask_admin\templates\bootstrap3\admin 下
然后配置,使其訪問我們指定的文件
# 自定義的 modelview
class PeachPostView(ModelView):
# 指定訪問文件
create_template = 'admin/model/peach-post-create.html'
edit_template = 'admin/model/peach-post-edit.html'
def __init__(self, model, session, **kwargs):
super(PeachPostView, self).__init__(model, session, **kwargs)
# 指定 base_template 文件
admin = Admin(name=name, template_mode=template_mode,index_view=PeachAdminIndexView(), base_template='admin/peach-base.html')
# 省略部分代碼
admin.add_view(PeachPostView(Post, db.session, endpoint='AdminPost'))
修改文件, 支持 markdown
動手修改文件的之前,我們需要先了解一下 flask-amdmin 原有的文件是什么樣子的,然后才能正確的修改,這里以 create.html 為例子,截取關鍵代碼.
# create.html
{% import 'admin/lib.html' as lib with context %}
# ...
{% block edit_form %}
{{ lib.render_form(form, return_url, extra(), form_opts) }} # 使用了 lib 中的函數,看一下這個函數
{% endblock %}
# lib.html
{% macro render_form(form, cancel_url, extra=None, form_opts=None, action=None, is_modal=False) -%}
{% call form_tag(action=action) %}
{{ render_form_fields(form, form_opts=form_opts) }} # 重點是表單渲染,再看一下 render_form_fields 函數
{{ render_form_buttons(cancel_url, extra, is_modal) }}
{% endcall %}
{% endmacro %}
{% macro render_form_fields(form, form_opts=None) %}
# 省略部分代碼
{{ render_field(form, f, kwargs) }} # 看一下 render_field 這個函數
{% endmacro %}
{% macro render_field(form, field, kwargs={}, caller=None) %}
{% set direct_error = h.is_field_error(field.errors) %}
<div class="form-group{{ ' has-error' if direct_error else '' }}">
<label for="{{ field.id }}" class="col-md-2 control-label">{{ field.label.text }}
{% if h.is_required_form_field(field) %}
<strong style="color: red">*</strong>
{%- else -%}
{%- endif %}
</label>
<div class="{{ kwargs.get('column_class', 'col-md-10') }}">
{% set _dummy = kwargs.setdefault('class', 'form-control') %}
{{ field(**kwargs)|safe }}
{% if field.description %}
<p class="help-block">{{ field.description|safe }}</p>
{% endif %}
{% if direct_error %}
<ul class="help-block input-errors">
{% for e in field.errors if e is string %}
<li>{{ e }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
{% if caller %}
{{ caller(form, field, direct_error, kwargs) }}
{% endif %}
</div>
{% endmacro %}
通過上述 flask-admin 源碼的瀏覽,我們不難發現,最終的渲染最核心的函數就是 lib.html 中的 render_field 函數, 要達到我們的目的,我們就需要對這個函數進行一點的修改了.由於我們只需要對數據庫模型的某個字段支持 markdown 就可以了,所以需要我們可以通過 field.id == '字段名' 的方法去判斷,從而讓他支持 markdown.
為了更好的理解接下來的代碼,我們對 editor.md 的使用做一個簡單的說明:
<link rel="stylesheet" href="editormd.min.css" />
<div id="editormd">
<textarea style="display:none;">### Hello Editor.md !</textarea>
</div>
<script src="jquery.min.js"></script>
<script src="editormd.min.js"></script>
<script type="text/javascript">
$(function() {
var editor = editormd("editormd", {
path : "../lib/" // Autoload modules mode, codemirror, marked... dependents libs path
});
/*
// or
var editor = editormd({
id : "editormd",
path : "../lib/"
});
*/
});
</script>
說明完了怎么使用 editor.md,我們來說一下我們最終的思路, 通過字段名去判斷,然后符合添加的情況下,新建一個 div, id 為 editor,然后在 peach-post-create.html 按照 editor.md 的使用方法渲染.說完了思路,接下來就看代碼.
修改 peach-lib.html 和 peach-post-create.html 文件
# peach-lib.html
{% macro render_field(form, field, kwargs={}, caller=None) %}
{% set direct_error = h.is_field_error(field.errors) %}
<div class="form-group{{ ' has-error' if direct_error else '' }}">
<label for="{{ field.id }}" class="col-md-2 control-label">{{ field.label.text }}
{% if h.is_required_form_field(field) %}
<strong style="color: red">*</strong>
{%- else -%}
{%- endif %}
</label>
<div class="{{ kwargs.get('column_class', 'col-md-10') }}">
{% set _dummy = kwargs.setdefault('class', 'form-control') %}
{% if field.id == 'content' %} # 符合條件新建一個 div
<div id='editormd'>
{{ field(**kwargs)|safe }}
</div>
{% else %}
{{ field(**kwargs)|safe }}
{% endif %}
{% if field.description %}
<p class="help-block">{{ field.description|safe }}</p>
{% endif %}
{% if direct_error %}
<ul class="help-block input-errors">
{% for e in field.errors if e is string %}
<li>{{ e }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
{% if caller %}
{{ caller(form, field, direct_error, kwargs) }}
{% endif %}
</div>
{% endmacro %}
# peach-post-create.html
{% extends 'admin/master.html' %}
{% import 'admin/peach-lib.html' as lib with context %}
{% from 'admin/peach-lib.html' import extra with context %} {# backward compatible #}
# 省略部分代碼
{{ super() }}
{{ lib.form_css() }}
<link href="{{ url_for('static', filename='plugins/editor.md/css/editormd.min.css')}}" rel='stylesheet'>
{% endblock %}
# 省略部分代碼
{% block tail %}
{{ super() }}
{{ lib.form_js() }}
<script src="{{ url_for('static', filename='plugins/editor.md/editormd.js')}}"></script>
<script type="text/javascript">
$(function() {
var editor = editormd("editormd", {
path : "/plugins/editor.md/lib/",
height : 640
});
});
</script>
{% endblock %}
修改 modelview
class PeachPostView(ModelView):
# 省略部分代碼
create_template = 'admin/model/peach-post-create.html'
admin = Admin(name=name, template_mode=template_mode,index_view=PeachAdminIndexView(), base_template='admin/peach-base.html')
# 省略部分代碼
admin.add_view(PeachPostView(Post, db.session, endpoint='AdminPost'))
完整代碼可以查看 add:使用 editor.md 編輯器
最后看一下效果圖:
最后
到此大功告成,歡迎大家關注我的公共號-Leetao, 偶爾分享 flask 之外的知識.