初探 Flask-CKEditor

前言

Flask-CKEditor 是 Flask 框架整合 CKEditor 的擴充套件。CKEditor 是一個專門使用在網頁上屬於開放原始碼的所見即所得文字編輯器(WYSIWYG Editor)，它能讓你的網頁表單不再只是單調的文字框（Textarea），而是擁有像 Word 一樣的功能，支援文字加粗、變更顏色、插入圖片、表格、程式碼區塊等。

安裝所需套件

pip3 install Flask-CKEditor

參考 : Flask-CKEditor · PyPI

程式碼 app.py

python 复制代码

from flask import Flask, render_template, flash
from flask_wtf import FlaskForm
from wtforms import StringField, TextAreaField, SubmitField
from wtforms.validators import DataRequired

app = Flask(__name__)

app.config["SECRET_KEY"] = "your-secret-key"
app.config["WTF_CSRF_TIME_LIMIT"] = None


class PostForm(FlaskForm):
    title = StringField(
        "文章標題",
        validators=[
            DataRequired(message="標題不可為空")
        ]
    )
    content = TextAreaField(
        "文章內容",
        validators=[
            DataRequired(message="內容不可為空")
        ]
    )

    submit = SubmitField("發表文章")


@app.route("/", methods=["GET", "POST"])
def index():
    form = PostForm()
    title = None
    content = None

    if form.validate_on_submit():
        title = form.title.data
        content = form.content.data or ""

        flash("文章發表成功！", "success")

    return render_template(
        "index.html",
        form=form,
        title=title,
        content=content
    )


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

說明

Flash是Flask框架提供的用於儲存提示訊息的機制

程式碼 index.html

html 复制代码

<!DOCTYPE html>
<html lang="zh-TW">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">

    <title>Flask-CKEditor 整合</title>

    <link
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
        rel="stylesheet">
    <script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/classic/ckeditor.js"></script>

    <style>
        .article-body img{
            max-width:100%;
            height:auto;
        }
        .ck-editor__editable_inline{
            min-height:400px;
        }
    </style>

</head>

<body class="bg-light">

<div class="container py-5">

    <div class="card shadow">

        <div class="card-header">
            <h2>Flask-CKEditor 整合</h2>
        </div>

        <div class="card-body">
            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    {% for category,message in messages %}
                        <div class="alert alert-success">
                            {{ message }}
                        </div>
                    {% endfor %}
                {% endif %}
            {% endwith %}

            <form method="POST" novalidate>
                {{ form.hidden_tag() }}
                <div class="mb-3">
                    {{ form.title.label(class="form-label") }}
                    {{ form.title(
                        class="form-control",
                        placeholder="請輸入文章標題"
                    ) }}
                    {% for error in form.title.errors %}
                        <div class="text-danger">
                            {{ error }}
                        </div>
                    {% endfor %}
                </div>
                <div class="mb-3">
                    {{ form.content.label(class="form-label") }}
                    {{ form.content(
                        id="editor",
                        class="form-control"
                    ) }}
                    {% for error in form.content.errors %}
                        <div class="text-danger">
                            {{ error }}
                        </div>
                    {% endfor %}
                </div>
                {{ form.submit(
                    class="btn btn-primary"
                ) }}
            </form>
        </div>

    </div>

    {% if content %}
    <div class="card shadow mt-4">
        <div class="card-header">
            <h4>預覽文章</h4>
        </div>

        <div class="card-body">
            <h4>{{ title }}</h4>
            <hr>
            <div class="article-body">
                {{ content|safe }}
            </div>
        </div>
    </div>
    {% endif %}

</div>

<script>
    ClassicEditor
        .create(document.querySelector('#editor'), {
            toolbar: [
                'heading',
                '|',
                'bold',
                'italic',
                'link',
                'bulletedList',
                'numberedList',
                'blockQuote',
                '|',
                'insertTable',
                'undo',
                'redo'
            ],
            table: {
                contentToolbar: [
                    'tableColumn',
                    'tableRow',
                    'mergeTableCells'
                ]
            }
        })
        .catch(error => {
            console.error(error);
        });
</script>

</body>
</html>

說明

get_flashed_messages()來訪問並顯示flash訊息

測試

http://127.0.0.1:5000/

點選 $** 發表文章**$