Add flask-ckeditor example

greyli · Sep 9, 2024 · 2485c9b · 2485c9b
1 parent f7db4ab
commit 2485c9b
Show file tree

Hide file tree

Showing 11 changed files with 239 additions and 8 deletions.
diff --git a/examples/ckeditor/.flaskenv b/examples/ckeditor/.flaskenv
@@ -0,0 +1 @@
+FLASK_DEBUG=1
diff --git a/examples/ckeditor/app.py b/examples/ckeditor/app.py
@@ -0,0 +1,37 @@
+import os
+
+from flask_ckeditor import CKEditor
+from flask import Flask, render_template, flash
+from flask_wtf import FlaskForm
+from wtforms import StringField, SubmitField
+from wtforms.validators import DataRequired, Length
+from flask_ckeditor import CKEditorField
+from bleach import clean
+
+app = Flask(__name__)
+app.secret_key = os.getenv('SECRET_KEY', 'secret string')
+ckeditor = CKEditor(app)
+
+def clean_html(html):
+    allowed_tags = ['a', 'abbr', 'b', 'br', 'blockquote', 'code',
+                    'del', 'div', 'em', 'img', 'p', 'pre', 'strong',
+                    'span', 'ul', 'li', 'ol']
+    allowed_attributes = ['src', 'title', 'alt', 'href', 'class']
+    return clean(html, tags=allowed_tags, attributes=allowed_attributes)
+
+
+class ArticleForm(FlaskForm):
+    title = StringField('Title', validators=[DataRequired(), Length(1, 50)])
+    body = CKEditorField('Body', validators=[DataRequired()])
+    submit = SubmitField('Publish')
+
+
+@app.route('/', methods=['GET', 'POST'])
+def index():
+    form = ArticleForm()
+    if form.validate_on_submit():
+        title = form.title.data
+        body = clean_html(form.body.data)
+        flash('Your article is published!')
+        return render_template('article.html', title=title, body=body)
+    return render_template('index.html', form=form)
diff --git a/examples/ckeditor/static/favicon.ico b/examples/ckeditor/static/favicon.ico
diff --git a/examples/ckeditor/static/style.css b/examples/ckeditor/static/style.css
@@ -0,0 +1,88 @@
+body {
+  margin: auto;
+  width: 750px;
+}
+
+nav ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  background-color: #333;
+}
+
+nav li {
+  float: left;
+}
+
+nav li a {
+  display: block;
+  color: white;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+}
+
+nav li a:hover {
+  background-color: #111;
+}
+
+main {
+  padding: 10px 20px;
+}
+
+.alert {
+  position: relative;
+  padding: 0.75rem 1.25rem;
+  margin-bottom: 1rem;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+  color: #004085;
+  background-color: #cce5ff;
+  border-color: #b8daff;
+}
+
+.error {
+  color: #721c24;
+  background-color: #f8d7da;
+  border-color: #f5c6cb;
+}
+
+.note {
+  padding: 5px 10px 10px;
+  border-left: solid 2px #bbb;
+  margin-bottom: 20px;
+}
+
+.note form {
+  display: inline;
+}
+
+.info {
+  color: grey;
+}
+
+.btn {
+  font-family: Arial;
+  font-size: 12px;
+  padding: 5px 8px;
+  text-decoration: none;
+  cursor: pointer;
+  background-color: white;
+  color: black;
+  border: 1px solid #999999;
+}
+
+.btn:hover {
+  text-decoration: none;
+  border: 1px solid black;
+}
+
+footer {
+  font-size: 13px;
+  color: #888;
+  border-top: 1px solid #eee;
+  margin-top: 25px;
+  text-align: center;
+  padding: 20px;
+}
diff --git a/examples/ckeditor/templates/article.html b/examples/ckeditor/templates/article.html
@@ -0,0 +1,8 @@
+{% extends 'base.html' %}
+
+{% block title %}{{ title }}{% endblock %}
+
+{% block content %}
+<h1>{{ title }}</h1>
+<p>{{ body|safe }}</p>
+{% endblock %}
diff --git a/examples/ckeditor/templates/base.html b/examples/ckeditor/templates/base.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  {% block head %}
+  <meta charset="utf-8">
+  <title>{% block title %}HelloFlask - CKEditor Example{% endblock %}</title>
+  <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">
+  {% block styles %}
+  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css' ) }}">
+  {% endblock %}
+  {% endblock %}
+</head>
+
+<body>
+  <nav>
+    <ul>
+      <li><a href="{{ url_for('index') }}">HelloFlask</a></li>
+    </ul>
+  </nav>
+  <main>
+    {% for message in get_flashed_messages() %}
+    <div class="alert">{{ message }}</div>
+    {% endfor %}
+    {% block content %}{% endblock %}
+  </main>
+  <footer>
+    {% block footer %}
+    <small> &copy; 2024 <a href="https://greyli.com">Grey Li</a> /
+      <a href="https://github.com/greyli/helloflask">GitHub</a> /
+      <a href="https://helloflask.com">HelloFlask</a>
+    </small>
+    {% endblock %}
+  </footer>
+  {% block scripts %}{% endblock %}
+</body>
+
+</html>
diff --git a/examples/ckeditor/templates/index.html b/examples/ckeditor/templates/index.html
@@ -0,0 +1,18 @@
+{% extends 'base.html' %}
+{% from 'macros.html' import form_field %}
+
+{% block content %}
+<h1>New Article</h1>
+<form method="post">
+  {{ form.csrf_token }}
+  {{ form_field(form.title) }}
+  {{ form_field(form.body) }}
+  {{ form.submit }}
+</form>
+{% endblock %}
+
+{% block scripts %}
+{{ super() }}
+{{ ckeditor.load() }}
+{{ ckeditor.config(name='body') }}
+{% endblock %}
diff --git a/examples/ckeditor/templates/macros.html b/examples/ckeditor/templates/macros.html
@@ -0,0 +1,9 @@
+{% macro form_field(field) %}
+{{ field.label }}<br>
+{{ field(**kwargs) }}<br>
+{% if field.errors -%}
+{% for error in field.errors -%}
+<small class="error">{{ error }}</small><br>
+{%- endfor %}
+{%- endif %}
+{% endmacro %}
diff --git a/pdm.lock b/pdm.lock
diff --git a/pyproject.toml b/pyproject.toml
@@ -15,6 +15,7 @@ dependencies = [
     "flask-mailman>=1.1.0",
     "flask-caching>=2.3.0",
     "flask-assets>=2.1.0",
+    "bleach>=6.1.0",
 ]
 requires-python = ">=3.8"
 readme = "README.md"

diff --git a/requirements/v2.txt b/requirements/v2.txt
@@ -1,6 +1,9 @@
 # This file is @generated by PDM.
 # Please do not edit it manually.
 
+bleach==6.1.0 \
+    --hash=sha256:0a31f1837963c41d46bbf1331b8778e1308ea0791db03cc4e7357b97cf42a8fe \
+    --hash=sha256:3225f354cfc436b9789c66c4ee030194bee0568fbf9cbdad3bc8b5c26c5f12b6
 blinker==1.8.2 \
     --hash=sha256:1779309f71bf239144b9399d06ae925637cf6634cf6bd131104184531bf67c01 \
     --hash=sha256:8f77b09d3bf7c795e969e9486f39c2c5e9c39d4ee07424be2bc594ece9642d83
@@ -90,9 +93,9 @@ flask-assets==2.1.0 \
 flask-caching==2.3.0 \
     --hash=sha256:51771c75682e5abc1483b78b96d9131d7941dc669b073852edfa319dd4e29b6e \
     --hash=sha256:d7e4ca64a33b49feb339fcdd17e6ba25f5e01168cf885e53790e885f83a4d2cf
-flask-ckeditor==0.5.1 \
-    --hash=sha256:15c8a54a0967cc51b6fa8191ab5fa042e7ee486d6d420c4d5f509a357557c278 \
-    --hash=sha256:330b10f1364a5ef990fd1de72429bb03e4a1ab6ee3aec85f7b38656315dd07fd
+flask-ckeditor==1.0.0 \
+    --hash=sha256:1a4aa871b510100df7bb8401b71cdcddfe1fd6d860649bc3760d0d43df485d72 \
+    --hash=sha256:e1737ca180ea0d46d53226f888f4786589f2e8ed810694aaff2aa68dfad15a98
 flask-mailman==1.1.0 \
     --hash=sha256:1bb2b701cb332cf888962fd9d9155714f84b7f2c0d75a4d596548cae5d479bff \
     --hash=sha256:538c94334f211f29d18fab5f5870c3711f8ded08d6fe93ca488b10d3e7c107e6
@@ -342,6 +345,9 @@ watchdog==4.0.1 \
 webassets==2.0 \
     --hash=sha256:167132337677c8cedc9705090f6d48da3fb262c8e0b2773b29f3352f050181cd \
     --hash=sha256:a31a55147752ba1b3dc07dee0ad8c8efff274464e08bbdb88c1fd59ffd552724
+webencodings==0.5.1 \
+    --hash=sha256:a0af1213f3c2226497a97e2b3aa01a7e4bee4f403f95be16fc9acd2947514a78 \
+    --hash=sha256:b36a1c245f2d304965eb4e0a82848379241dc04b865afcc4aab16748587e1923
 werkzeug==3.0.3 \
     --hash=sha256:097e5bfda9f0aba8da6b8545146def481d06aa7d3266e7448e2cccf67dd8bd18 \
     --hash=sha256:fc9645dc43e03e4d630d23143a04a7f947a9a3b5727cd535fdfe155a17cc48c8