flask_editormd 0.0.7

Editor

{% extends "bootstrap/base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block content -%}

<form method="POST">
    {{ form.hidden_tag() }}

    {{ form.body() }}

    {{ wtf.form_field(form.submit) }}
</form>

{%- endblock content %}


{% block scripts %}
{{ super() }}

{{ editormd.add_editormd_resource(autoLoadModules=False) }}
{{ editormd.add_editormd(autoHeight=True, autoLoadModules=False)}}

{%- endblock scripts %}

from flask import Flask, render_template
from flask_wtf import FlaskForm
from flask_editormd import Editormd
from flask_bootstrap import Bootstrap
from flask_editormd.fields import EditormdField
from wtforms.fields import SubmitField

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
editormd = Editormd(app)
Bootstrap(app)

class EditormdForm(FlaskForm):
    body = EditormdField()
    submit = SubmitField('Submit')

@app.route('/', methods=['GET', 'POST'])
def index():
    form = EditormdForm()
    if form.validate_on_submit():
        text = form.body.data
        print(text)

    return render_template('index.html', form=form)

Preview

{% extends "bootstrap/base.html" %}

{% block content -%}

{{ editormd.add_editormd_previewer(content) }}


{%- endblock content %}


{% block scripts %}
{{ super() }}
{{ editormd.add_editormd_previewer_resource() }}

{%- endblock scripts %}

from flask import Flask, render_template
from flask_editormd import Editormd
from flask_bootstrap import Bootstrap

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
editormd = Editormd(app)
Bootstrap(app)

@app.route('/preview', methods=['GET', 'POST'])
def preview():
    content = """
    ###科学公式 TeX(KaTeX)

$$E=mc^2$$

行内的公式$$E=mc^2$$行内的公式，行内的$$E=mc^2$$公式。

$$\(\sqrt{3x-1}+(1+x)^2\)$$

$$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$

$$X^2 > Y$$

#####上标和下标

上标：X<sup>2</sup>

下标：O<sub>2</sub>
"""
    return render_template('preview.html', content=content)

add_editormd和add_editormd_resource

针对editormd的某个编辑器的配置接口，editormd文档描述的那些参数都可以传递过去：

{{ editormd.add_editormd_resource(autoLoadModules=False) }}

{{ editormd.add_editormd(toolbarIcons=["undo", "redo", "|", "bold", "del", "italic","quote", "|", "list-ul", "list-ol", "hr", "|", "link","reference-link","image","|","code-block", "table","html-entities","|", "goto-line", "watch", "unwatch","preview","fullscreen", "help"], autoHeight=True, appendMarkdown="\n\n\n\n\n",autoLoadModules=False, autoLoadPlugins=True) }}

• autoLoadModules 默认 True 自动加载本地editormd的模块，如果设置为False，那么记得 add_editormd_resource 也要设置 autoLoadModules=False 好加载额外需要的本地模块资源，

• autoLoadPlugins 默认为 False，你可能并不需要加载插件资源，比如editormd的simple模式，如果需要加载插件那么将其设置为 True 。

add_editormd_previewer 和 add_editormd_previewer_resource

针对editormd的markdown文件预览接口，具体使用很简单，除了 add_editormd_previewer 将markdown content 传递进去即可，并不其他参数。

可以在jinja2上执行多次 add_editormd_previewer 添加多个文章预览。

{{ editormd.add_editormd_previewer(post.body) }}

{{ editormd.add_editormd_previewer_resource() }}