Skip to content

Commit

Permalink
Merge pull request #3 from raizapw19/improve-readme
Browse files Browse the repository at this point in the history
Update README.md
  • Loading branch information
zhenyong97 authored Jul 25, 2022
2 parents 674843e + 088ef22 commit da79222
Showing 1 changed file with 15 additions and 15 deletions.
30 changes: 15 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,28 +8,28 @@

![](./flask_and_mdeditor.png)

**Flask-mdeditor** is Markdown Editor plugin application for [flask]() base on [Editor.md](https://github.com/pandao/editor.md).
**Flask-mdeditor** is Markdown Editor plugin application for [Flask](https://flask.palletsprojects.com/en/2.1.x/) and is based on [Editor.md](https://github.com/pandao/editor.md).

**Flask-mdeditor** was inspired by great [django-mdeditor](https://github.com/pylixm/django-mdeditor), [flask-ckeditor](https://github.com/greyli/flask-ckeditor)
**Flask-mdeditor** was inspired by the great [django-mdeditor](https://github.com/pylixm/django-mdeditor) and [flask-ckeditor](https://github.com/greyli/flask-ckeditor)

**Note:**

* For Markdown page rendering issues, backend rendering is recommended. you can use markdon render plugin such like [mistune](https://github.com/lepture/mistune)
* For Markdown page rendering issues, backend rendering is recommended. You can use markdown render plugin such as [mistune](https://github.com/lepture/mistune).

## Features
------------------------------
* Alomost Editor.md features
* Support Standrad Markdown / CommonMark and GFM(GitHub Flavored Markdown);
* Full-featured: Real-time Preview, Image upload, Preformatted text/Code blocks/Tables insert, search replace, Themes, Multi-languages;
* The MDEditorField is provided for the FlaskForm;
* 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` needed to be frist config, such like:
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:
```python
from flask_mdeditor import MDEditor
import os
Expand All @@ -40,23 +40,23 @@ app.config['MDEDITOR_FILE_UPLOADER'] = os.path.join(basedir, 'uploads') # this f
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:
When using Flask-WTF/WTForms, you can import MDEditorField provided by FLASK-MDEDITOR and use it just like StringField:
```python
from flask_mdeditor import MDEditorField
class PostForm(FlaskForm):
content = MDEditorField('Body', validators=[DataRequired()])
submit = SubmitField()

```
then you can use it in your template
Then you can use it in your template:
```html
<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:
Or, if you don't use the wtf, you can use the global jinja2 func `{{ mdeditor.load() }}` to load the editor, such as:
```html
<form action="/" method="POST">
{{ mdeditor.load() }}
Expand All @@ -65,7 +65,7 @@ or , if you don't use the wtf, you can use the global jinja2 func `{{ mdeditor.l
```

### Get the Data
* use the wtf
* Use the wtf
```python
@app.route('/post', methods=['GET', 'POST'])
def post():
Expand All @@ -74,8 +74,8 @@ def post():
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:
* Else,
since the MDEditor textarea is just a normal `<textarea>` element, you can get the data from request.form by passing **mdeditor** as key:
```python
@app.route('/save', methods=['POST'])
def new_post():
Expand All @@ -85,7 +85,7 @@ def new_post():
```
------------------
## Tip
check the demo application at demo/flask_test
Check the demo application at demo/flask_test.

## Available Configuration
The more configuration options available are listed below:
Expand Down

0 comments on commit da79222

Please sign in to comment.