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

OliverFu2019 · Jun 9, 2019 · 2caf5b7 · 2caf5b7
1 parent b05e1a6
commit 2caf5b7
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 1 deletion.
diff --git a/app/__init__.py b/app/__init__.py
@@ -4,12 +4,14 @@
 from flask_moment import Moment
 from flask_sqlalchemy import SQLAlchemy
 from flask_login import LoginManager
+from flask_pagedown import PageDown
 from config import config
 
 bootstrap = Bootstrap()
 mail = Mail()
 moment = Moment()
 db = SQLAlchemy()
+pagedown = PageDown()
 
 login_manager = LoginManager()
 login_manager.login_view = 'auth.login'
@@ -25,6 +27,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)

diff --git a/app/main/forms.py b/app/main/forms.py
@@ -3,6 +3,7 @@
     SubmitField
 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 @@ def validate_username(self, field):
 
 
 class PostForm(FlaskForm):
-    body = TextAreaField("What's on your mind?", validators=[DataRequired()])
+    body = PageDownField("What's on your mind?", validators=[DataRequired()])
     submit = SubmitField('Submit')
diff --git a/app/static/styles.css b/app/static/styles.css
@@ -37,4 +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%;
+}
 
diff --git a/app/templates/index.html b/app/templates/index.html
@@ -20,3 +20,8 @@ <h1>Hello, {% if current_user.is_authenticated %}{{ current_user.username }}{% e
 </div>
 {% endif %}
 {% endblock %}
+
+{% block scripts %}
+{{ super() }}
+{{ pagedown.include_pagedown() }}
+{% endblock %}
diff --git a/requirements/common.txt b/requirements/common.txt
@@ -8,6 +8,7 @@ Flask-Login==0.4.0
 Flask-Mail==0.9.1
 Flask-Migrate==2.0.4
 Flask-Moment==0.5.1
+Flask-PageDown==0.2.2
 Flask-SQLAlchemy==2.2
 Flask-WTF==0.14.2
 itsdangerous==0.24