Flask-mdeditor

Flask-mdeditor is Markdown Editor plugin application for Flask and is based on Editor.md.

Flask-mdeditor was inspired by the great django-mdeditor and flask-ckeditor

Note:

• For Markdown page rendering issues, backend rendering is recommended. You can use markdown render plugin such as mistune.

Features

---

• Almost Editor.md features:
  • Supports Standard Markdown/CommonMark and GFM(GitHub Flavored Markdown);
  • Full-featured: Real-time Preview, Image upload, Preformatted text/Code blocks/Tables insert, search replace, Themes and Multi-languages;
  • The MDEditorField is provided for the FlaskForm.

Quick Start

---

Installation

pip install flask-mdeditor

Initialization

This extension needs to be initialized in the usual way before it can be used. In order to be able to save upload image correctly, MDEDITOR_FILE_UPLOADER needs to be first configured, such as:

from flask_mdeditor import MDEditor
import os

basedir = os.path.abspath(os.path.dirname(__file__))
app = Flask(__name__)
app.config['MDEDITOR_FILE_UPLOADER'] = os.path.join(basedir, 'uploads') # this floder uesd to save your uploaded image
mdeditor = MDEditor(app)

Working with Flask-WTF/WTForms

When using Flask-WTF/WTForms, you can import MDEditorField provided by FLASK-MDEDITOR and use it just like StringField:

from flask_mdeditor import  MDEditorField
class PostForm(FlaskForm):
    content = MDEditorField('Body', validators=[DataRequired()])
    submit = SubmitField()

Then you can use it in your template:

<form action="/xxx" method="POST">
        {{ form.csrf_token }}
        {{ form.content.label }} {{ form.content() }}
        {{ form.submit() }}
</form>

Or, if you don't use the wtf, you can use the global jinja2 func {{ mdeditor.load() }} to load the editor, such as:

<form action="/" method="POST">
    {{ mdeditor.load() }}
    <button type="submit">submit</button>
</form>

Get the Data

• Use the wtf

@app.route('/post', methods=['GET', 'POST'])
def post():
    form = PostForm()
    if form.validate_on_submit():
        body = form.content.data
        ...

• Else, since the MDEditor textarea is just a normal <textarea> element, you can get the data from request.form by passing mdeditor as key:

@app.route('/save', methods=['POST'])
def new_post():
    if request.method == 'POST':
        data = request.form.get('mdeditor')
    ...

---

Tip

Check the demo application at demo/flask_test.

Available Configuration

The more configuration options available are listed below:

Name	Default Value	Info	Required	Option
MDEDITOR_FILE_UPLOADER	path	the floder path used to save uploaded img	√
MDEDITOR_HEIGHT	500px	Browser rendering editor height	×
MDEDITOR_WIDTH	100%	Browser rendering editor width	×
MDEDITOR_THEME	default	editor main theme	×	dark / default
MDEDITOR_PREVIEW_THEME	default	preview area theme	×	default / dark
MDEDITOR_EDITOR_THEME	default	edit area theme	×	pastel-on-dark / default
MDEDITOR_LANGUAGE	en	editor language	×	zh / en

TODO

• Unit Testing
• code optimization
• More Features

License

The MIT License.

Copyright (c) 2020 Zisc