Chapter 11: Rich text blog posts with Flask-PageDown (11e)

app/__init__.py

@@ -4,6 +4,7 @@ from flask_mail import Mail
 from flask_moment import Moment
 from flask_sqlalchemy import SQLAlchemy
 from flask_login import LoginManager
+from flask_pagedown import PageDown
 from config import config
 
 
@@ -11,6 +12,7 @@ bootstrap = Bootstrap()
 mail = Mail()
 moment = Moment()
 db = SQLAlchemy()
+pagedown = PageDown()
 
 
 login_manager = LoginManager()
@@ -27,6 +29,7 @@ def create_app(config_name):
     moment.init_app(app)
     db.init_app(app)
     login_manager.init_app(app)
+    pagedown.init_app(app)
 
     from .main import main as main_blueprint
     app.register_blueprint(main_blueprint)

app/main/forms.py

@@ -3,6 +3,7 @@ from wtforms import StringField, SubmitField, TextAreaField, BooleanField, \
     SelectField
 from wtforms.validators import DataRequired, Length, Email, Regexp
 from wtforms import ValidationError
+from flask_pagedown.fields import PageDownField
 from ..models import Role, User
 
 
@@ -51,5 +52,5 @@ class EditProfileAdminForm(FlaskForm):
 
 
 class PostForm(FlaskForm):
-    body = TextAreaField("What's on your mind?", validators=[DataRequired()])
+    body = PageDownField("What's on your mind?", validators=[DataRequired()])
     submit = SubmitField('Submit')

app/static/styles.css

@@ -37,3 +37,27 @@ div.pagination {
     padding: 0px;
     margin: 0px;
 }
+div.flask-pagedown-preview {
+     margin: 10px 0px 10px 0px;
+     border: 1px solid #e0e0e0;
+     padding: 4px;
+ }
+ div.flask-pagedown-preview h1 {
+     font-size: 140%;
+ }
+ div.flask-pagedown-preview h2 {
+     font-size: 130%;
+ }
+ div.flask-pagedown-preview h3 {
+     font-size: 120%;
+ }
+ .post-body h1 {
+     font-size: 140%;
+ }
+ .post-body h2 {
+     font-size: 130%;
+ }
+ .post-body h3 {
+     font-size: 120%;
+ }
+ 

app/templates/index.html

@@ -23,3 +23,8 @@
  </div>
  {% endif %}
 {% endblock %}
+
+{% block scripts %}
+{{ super() }}
+{{ pagedown.include_pagedown() }}
+{% endblock %}

requirements/common.txt

@@ -8,6 +8,7 @@ Flask-Login==0.4.1
 Flask-Mail==0.9.1
 Flask-Migrate==2.2.1
 Flask-Moment==0.6.0
+Flask-PageDown==0.2.2
 Flask-SQLAlchemy==2.3.2
 Flask-WTF==0.14.2
 itsdangerous==0.24