從零開發博客-讓Flask-admin支持markdown編輯器(一)

前言

flask-admin 算是一個很不錯的 flask 後台管理了,用它來做博客系統的管理後端再合適不過了,節約時間成本,避免重複造輪子,但是作為一個程序員,寫文章怎麼可以沒有 markdown 呢? 現在讓我們嘗試一下讓 flask-admin 支持 markdown 吧.

實踐

Flask-PageDown

這個庫是對 Pagedown 的封裝,將其集成到了Flask-WTF表單中了。具體內容可以去它的 github 倉庫看一下: Flask-PageDown

優缺點

優點:

  1. 配置簡單
  2. 對 flask-admin 的改動較小

缺點:

  1. 無法實現對代碼的高亮
  2. 生成的編輯器是上下佈局的,不太美觀

使用方法

安裝和配置

通過 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) 這個開源編輯器,這個好像很久沒維護了,但是顏值挺高的了,就決定是它了.

優缺點

優點:

  1. 優點很明星,顏值高,滿足我對 markdown 的所有需求了,支持代碼高亮.

缺點:

  1. 對 flask-admin 的改動較多,需要自己寫的部分比較多.

使用方法

下載 editor.md 插件

插件下載很簡單,從官網上或者 github 上下載, 下載完成後,我這裏將 editor.md 下載的文檔保存到 static 的 plugin 的目錄下了.

覆蓋 flask-admin 原有文檔

這裏由於我們需要使用插件,所以我們需要對 flask-admin 原有的 create.html 和 edit.html 文檔進行重寫.

  1. 在 templates 目錄下新建 admin 目錄
  2. 在 admin 目錄下創建 model 目錄, 並添加 peach-post-create.html, peach-post-edit.html 文檔,將 flask-admin 對應的 create.html 和 edit.html 內容複製進去.
  3. 在 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">&#42;</strong>
        {%- else -%}
          &nbsp;
        {%- 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">&#42;</strong>
        {%- else -%}
          &nbsp;
        {%- 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 之外的知識.

關鍵詞:field flask form admin html lib 文檔 我們 editor kwargs

相關推薦:

HCTF 2018 web 部分題目 詳細 writeup

2018 HCTF Web Writeup

Flask-Pymongo登陸驗證問題小記

Nginx &sol; sails&period;js&colon; Incomplete file loading

原創 一款好用的Markdown編輯器及使用過程中的坑

Python Web - Flask筆記7

2018RealWorld-Web

RWCTF2018 BookHub Writeup & 爬坑感悟

wctf2018 cyber mimic defence Writeup

Flask Or Django? An In-Depth Comparison | Part Two