MDEditor integration for Flask
Project description
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
Project details
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.