跳转到主要内容

Flask-WTF的“PageDown”markdown编辑器的实现。

项目描述

Flask-PageDown

Build status

为Flask和Flask-WTF实现StackOverflow的“PageDown”markdown编辑器。

什么是PageDown?

PageDown 是Stack Overflow上使用的Markdown预览器,它也被用于Stack OverflowStack Exchange网络上的所有其他问答网站。

Flask-PageDown提供了一个PageDownField类,它扩展了Flask-WTF,并添加了一个专门的文本区域字段,该字段可以在您输入Markdown文本的同时实时渲染HTML预览。

安装

$ pip install flask-pagedown

示例

示例胜过千言万语。以下是如何定义一个简单的Flask-WTF表单,其中包含PageDown字段的示例

from flask_wtf import Form
from flask_pagedown.fields import PageDownField
from wtforms.fields import SubmitField

class PageDownFormExample(Form):
    pagedown = PageDownField('Enter your markdown')
    submit = SubmitField('Submit')

PageDownField的工作方式与TextAreaField完全相同(实际上它是它的子类)。视图函数中的处理也是一样的。例如

@app.route('/', methods = ['GET', 'POST'])
def index():
    form = PageDownFormExample()
    if form.validate_on_submit():
        text = form.pagedown.data
        # do something interesting with the Markdown text
    return render_template('index.html', form = form)

在可以使用之前,需要在通常的方式下初始化扩展

from flask_pagedown import PageDown

app = Flask(__name__)
pagedown = PageDown(app)

最后,需要在页面的某个位置调用pagedown.include_pagedown()以添加支持JavaScript代码

<html>
<head>
{{ pagedown.include_pagedown() }}
</head>
<body>
    <form method="POST">
        {{ form.hidden_tag() }}
        {{ form.pagedown(rows=10) }}
        {{ form.submit }}
    </form>
</body>
</html>

JavaScript类是从CDN导入的,没有需要由应用程序提供服务的静态文件。如果请求是安全的,那么JavaScript文件将从https:// URL导入以匹配。

如果您希望使用自己的JavaScript源文件,可以直接在HTML页面中包含您的转换器和清理器文件,而不是调用pagedown.include_pagedown()

<html>
<head>
    <script type="text/javascript" src="https://mycdn/path/to/converter.min.js"></script>
    <script type="text/javascript" src="https://mycdn/path/to/sanitizer.min.js"></script>
</head>
<body>
    <form method="POST">
        {{ form.hidden_tag() }}
        {{ form.pagedown(rows=10) }}
        {{ form.submit }}
    </form>
</body>
</html>

为了帮助添加特定的CSS样式,<textarea>元素有类名flask-pagedown-input,预览<div>有类名flask-pagedown-preview

使用上述模板,预览区域由扩展程序直接位于输入文本区域下方创建。为了更好地控制,还可以在页面的不同部分渲染输入和预览区域。以下示例展示了如何在上面的输入区域渲染预览区域。

<html>
<head>
{{ pagedown.include_pagedown() }}
</head>
<body>
    <form method="POST">
        {{ form.pagedown(only_preview=True) }}
        {{ form.pagedown(only_input=True, rows=10) }}
        {{ form.submit }}
    </form>
</body>
</html>

注意,在所有情况下,提交的文本都将为原始Markdown文本。渲染的HTML仅用于预览,如果您需要在服务器上渲染为HTML,则请使用服务器端Markdown渲染器,如Flask-Markdown

另外,当前版本不包括Stack Overflow使用的工具栏。

资源

项目详情


下载文件

下载您平台的文件。如果您不确定选择哪个,请了解更多关于安装包的信息。

源代码分布

Flask-PageDown-0.4.0.tar.gz (5.0 kB 查看哈希值)

上传时间 源代码

构建版本

Flask_PageDown-0.4.0-py3-none-any.whl (5.5 kB 查看哈希值)

上传时间 Python 3

由以下机构支持