Light

bittobennichan / flask-mde Goto Github PK

View Code? Open in Web Editor NEW

24.0 5.0 3.0 567 KB

Markdown editor with WTForms integration for Flask

Home Page: https://flask-mde.readthedocs.io

License: MIT License

Python 78.75% CSS 3.86% HTML 17.39%

pagedown markdown markdown-editor flask

flask-mde's Introduction

Flask-MDE: Pagedown for Flask

Release v1.2.1 | Example application

Pagedown Editor with Google code-prettify for Flask. WTForms integration supported. From v1.2.0 Flask-MDE supports pagedown-extra.

Pagedown is a Markdown editor and previewer popularised by its use on StackOverflow. You can use the Flask-MDE extension to integrate the Pagedown editor into your Flask application.

Installation

Installing Flask-MDE is simple with pip. To install Flask-MDE, run the command

pip install Flask-MDE

in your terminal

Basic Usage

Assuming the following folder structure:

.
├── app.py
└── templates/
    └── index.html

Files

app.py

from flask import Flask, render_template
from flask_mde import Mde

app = Flask(__name__)
mde = Mde(app)

@app.route('/')
def index():
    return render_template(
        "index.html"
    )


if __name__ == "__main__":
    app.run()

templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    {{mde.css}}
</head>
<body>
    {{mde.editor()}}
    {{mde.preview}}
    {{mde.js}}
</body>
</html>

Read the user guide to check out all the features.

Licenses that apply

flask-mde's People

Contributors

Stargazers

Watchers

Forkers

rogwan austinlv freedom-trail-realty-school-inc

flask-mde's Issues

Support `inline code` and ```Fenced code block```

Flask-MDE does not support Github Flavored Markdown syntax of using backticks for representing code . This creates compatibility issues for users when copying from GitHub, StackOverflow etc.

`inline` syntax is lacking background color.
Fenced code block not supported at all.

Option to adjust height of the editor

First requested by androgeninc.

Currently you can only adjust the height by adding css.

#wmd-input {
    height: 100px;
}

Request is for an option to adjust the height of the editor from Jinja2 itself. Flask-Pagedown has an option for this:

{{ form.pagedown(rows=10) }}

Using Flask-MDE with in application factory leads to - AttributeError: 'NoneType' object has no attribute 'context_processor'

Using Flask-MDE with in application factory leads to the following error

...
Original exception was:
Traceback (most recent call last):
  File "manage.py", line 2, in <module>
    from app import create_app, db
  File "/home/bitto/Desktop/serious_projects/ctrlv/app/__init__.py", line 9, in <module>
    mde = Mde()
  File "/usr/local/lib/python3.6/dist-packages/flask_mde/models.py", line 47, in __init__
    app.context_processor(self.context_processor)
AttributeError: 'NoneType' object has no attribute 'context_processor'

Steps to reproduce
Use Flask-MDE in application factory pattern like

from flask import Flask
from flask_mde import Mde
mde = Mde()


def create_app():
    app = Flask(__name__)
    mde.init_app(app)
    return app

Button Bar Not Displaying

The button bar is not displaying, instead I have:

 <div id="wmd-button-bar"></div>

Being injected into the html as:

            &lt;div id=&#34;wmd-button-bar&#34;&gt;&lt;/div&gt;<textarea id="wmd-input" name="editor">

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.