Skip to main content

Implementation of StackOverflow's "PageDown" markdown editor for Flask-WTF.

Project description

Flask-PageDown

Build status

Implementation of StackOverflow's "PageDown" markdown editor for Flask and Flask-WTF.

What is PageDown?

PageDown is the JavaScript Markdown previewer used on Stack Overflow and all the other question and answer sites in the Stack Exchange network.

Flask-PageDown provides a PageDownField class that extends Flask-WTF with a specialized text area field that renders an HTML preview of the Markdown text on the fly as you type.

Installation

$ pip install flask-pagedown

Example

An example is worth a thousand words. Below is how to define a simple Flask-WTF form that includes a PageDown field:

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')

The PageDownField works exactly like a TextAreaField (in fact it is a subclass of it). The handling in view functions is identical. For example:

@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)

The extension needs to be initialized in the usual way before it can be used:

from flask_pagedown import PageDown

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

Finally, the template needs the support Javascript code added, by calling pagedown.include_pagedown() somewhere in the page:

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

The Javascript classes are imported from a CDN, there are no static files that need to be served by the application. If the request is secure then the Javascript files are imported from an https:// URL to match.

If you prefer to use your own JavaScript source files, you can simply include your Converter and Sanitizer files directly in the HTML page instead of calling 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>

To help adding specific CSS styling the <textarea> element has class flask-pagedown-input and the preview <div> has class flask-pagedown-preview.

With the template above, the preview area is created by the extension right below the input text area. For greater control, it is also possible to render the input and preview areas on different parts of the page. The following example shows how to render the preview area above the input area:

<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>

Note that in all cases the submitted text will be the raw Markdown text. The rendered HTML is only used for the preview, if you need to render to HTML in the server then use a server side Markdown renderer like Flask-Markdown.

Also note that the current version does not include a toolbar like the one used by Stack Overflow.

Resources

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

Flask-PageDown-0.4.0.tar.gz (5.0 kB view details)

Uploaded Source

Built Distribution

Flask_PageDown-0.4.0-py3-none-any.whl (5.5 kB view details)

Uploaded Python 3

File details

Details for the file Flask-PageDown-0.4.0.tar.gz.

File metadata

  • Download URL: Flask-PageDown-0.4.0.tar.gz
  • Upload date:
  • Size: 5.0 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/3.4.2 importlib_metadata/4.5.0 pkginfo/1.7.0 requests/2.25.1 requests-toolbelt/0.9.1 tqdm/4.61.0 CPython/3.9.6

File hashes

Hashes for Flask-PageDown-0.4.0.tar.gz
Algorithm Hash digest
SHA256 10f3836f9d9b82210169af499241b7510a352491bee7a305eca7c783f15292d0
MD5 53117998799b216b8fa9a4972812371a
BLAKE2b-256 bc17b35144e53a200308581d886e8f3d6f95ecfafe97a226b786b138088e73f3

See more details on using hashes here.

Provenance

File details

Details for the file Flask_PageDown-0.4.0-py3-none-any.whl.

File metadata

  • Download URL: Flask_PageDown-0.4.0-py3-none-any.whl
  • Upload date:
  • Size: 5.5 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/3.4.2 importlib_metadata/4.5.0 pkginfo/1.7.0 requests/2.25.1 requests-toolbelt/0.9.1 tqdm/4.61.0 CPython/3.9.6

File hashes

Hashes for Flask_PageDown-0.4.0-py3-none-any.whl
Algorithm Hash digest
SHA256 aa6f938b5e809b6ef6889d28fef7096f20a0700de01082b0342764a5058225d2
MD5 3123f32e08d386260395dd138d9c4ac2
BLAKE2b-256 c43a03e9948b3e1942e471b7ebfe3138c4e5b6f06419cc68e0000a158d97052c

See more details on using hashes here.

Provenance

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page