前言

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">*</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">*</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 之外的知识.

让Flask-admin支持markdown编辑器的更多相关文章

  1. 在MAC OS 下配置python + Flask ,并支持pyCharm编辑器

    原创咯- flask是一个micro framework ,伸缩性很强.可以部署到openshift 的PAAS里.这个框架上手非常快.喜欢的可以试试. 若实在MAC里,python已经默认安装了.1 ...

  2. Django集成Markdown编辑器【附源码】

    专注内容写作的你一定不要错过markdown 简单介绍 markdown是一种标记语言,通过简单的标记语法可以使普通的文本内容具有一定的格式,使用非常简单,学习成本极低 目前各大Blog平台都已支持m ...

  3. 一个支持实时预览的在线 Markdown 编辑器 - Markdoc

    最近组内需要为一些项目和系统写文档,发表在公司内的文档平台上,这个平台并不支持markdown,所以打算做一个在线markdown编辑器,支持实时预览,并且可以很容易的迁移发表到公司文档平台上,所以就 ...

  4. 公众号在线Markdown编辑器，支持公式

    公众号排版不支持Markdown,用自带的富文本编辑器排版出来的格式十分丑陋,尤其是公式,竟然连"Mathjax"都不支持,但好在支持"带格式复制",也即可以将 ...

  5. 【完全开源】Django多人博客系统——支持MarkDown和tinyMce

    目录 说明 功能 如何使用 说明 这是一个用Django开发的多人博客系统,功能简单,但完全满足公司内部或个人的博客使用需求.支持普通富文本编辑器(tinyMCE)和MarkDown编辑器 由于嫌弃D ...

  6. thinkphp5使用Markdown编辑器Editor.md并上传图片

    Editor.md官网:https://pandao.github.io/editor.md/index.html 下载后解压放到项目内,和引入ueditor差不多 1.引入项目资源 <!--m ...

  7. 好用的Markdown编辑器一览 readme.md 编辑查看

    https://github.com/pandao/editor.md https://pandao.github.io/editor.md/examples/index.html Editor.md ...

  8. mac好用的markdown编辑器

    在刚开始接触markdown的时候,就被吸引了.此后一直在找贴心的好用的markdown编辑器.印象笔记和马克飞象配合着用也是挺好的,唯一的缺点就是比较封闭,发个笔记的链接给同学,还得注册才能看,导致 ...

  9. 破解 Windows 下Markdown 编辑器 MarkdownPad 2

    MarkdownPad 是 Windows 平台下一款优秀的 Markdown 编辑器,本文简单介绍 Markdown 以及使用一种方法破解 MarkdownPad 使其升级到专业版.该方法仅限于教育 ...

随机推荐

  1. 用node-inspector调试NodeJS

    任何一门完备的语言技术栈都少不了健壮的调试工具,对于NodeJS平台同样如此,笔者研究了几种调试NodeJS代码的方式,通过对比,还是觉得node-inspector的调试方式比较方便,而且和前端Ja ...

  2. JVM调优总结 + jstat 分析

    jstat -gccause pid 1 每格1毫秒输出结果jstat -gccause pid 2000 每格2秒输出结果不断的在屏幕打印出结果   S0     S1     E      O   ...

  3. django：DateTimeField如何自动设置为当前时间并且能被修改 ——django日期时间字段的使用

    创建django的model时,有DateTimeField.DateField和TimeField三种类型可以用来创建日期字段,其值分别对应着datetime().date().time()三中对象 ...

  4. IWDG—独立看门狗

    本章参考资料:<STM32F4XX 中文参考手册> IWDG 章节.学习本章时,配合<STM32F4XX 中文参考手册> IWDG 章节一起阅读,效果会更佳,特别是涉及到寄存器 ...

  5. 关联容器——map、set

    map类型通常被称为关联数组,与正常数组类似,不同之处在于其下标不必是整数.我们通过一个关键字而不是位置来查找值(键值对). 与之相对,set就是关键字的简单集合.当只是想知道一个值是否存在时,set ...

  6. docker centos7 dbus error解决方法

    在centos7 上使用centos7的docker镜像结果不能使用systemd,提示 Failed to get D-Bus connection: No connection to servic ...

  7. displaytag的Excel导出实践

    本文转自 http://lingceng.iteye.com/blog/1820081/ Displaytag官网有1.0, 1.1, 1.2等,注意找到对应的版本.源码和API可以在Maven库中找 ...

  8. Docker——MacOS上安装运行docker

    近几年来,Docker越来越流行,使用场景也越来越广泛.为了能尽快跟上时代步伐.学习并应用到实际工作中,我也开始了Docker之旅. Docker版本 Docker共有两种版本: 社区版(Commun ...

  9. C语言 · 完美的代价

    基础练习 完美的代价   时间限制:1.0s   内存限制:512.0MB        锦囊1 使用贪心算法. 锦囊2 从左到右枚举每个字符,移动对应字符.个数为单的字符放中间.   问题描述 回文 ...

  10. SpringMVC 利用AbstractRoutingDataSource实现动态数据源切换

    SpringMVC 利用AbstractRoutingDataSource实现动态数据源切换 本文转载至:http://exceptioneye.iteye.com/blog/1698064 Spri ...