python: Flaskアプリの作成13　リッチテキストエディター ckeditorを使用する - ビジネスパーソン・ガジェット置場　empty lot for business

備忘録です。

今回は記事を投稿するときのフォームに対してckeditorを使いリッチテキストエディターにする方法です。

リッチテキストエディター　CKEditor

その1　pipでインストール

$ pip3 install flask-ckeditor

まずはpipまたはpip3でインストールします。

ちなみにFlaskアプリの作成という備忘録も13になってきましたが、今現段階でインストールしたライブラリは下記の通りです。

alembic==1.8.1
click==8.1.3
DateTime==4.5
Flask==2.2.1
Flask-CKEditor==0.4.6
Flask-Migrate==3.1.0
Flask-SQLAlchemy==2.5.1
Flask-WTF==1.0.1
greenlet==1.1.2
importlib-metadata==4.12.0
itsdangerous==2.1.2
Jinja2==3.1.2
Mako==1.2.1
MarkupSafe==2.1.1
pytz==2022.1
SQLAlchemy==1.4.39
Werkzeug==2.2.1
WTForms==3.0.1
zipp==3.8.1
zope.interface==5.4.0

その2　app.pyでインポートし初期設定します

# app.py

from flask_ckeditor import CKEditor


app = Flask(__name__)
ckeditor = CKEditor(app)

その3　リッチテキストを使用したいhtmlファイルでロード

# add-project.html

{% extends "base.html"%}

{% block content %}
<br/>
<h1>プロジェクトを投稿</h1>
<br/>
<div class="shadow p-3 mb-5 bg-body rounded">
  <form method="POST">
    {{ form.hidden_tag() }}

    {{ form.p_title.label(class="form-label") }}
    {{ form.p_title(class="form-control") }}
    <br/>

    {{ form.p_content.label(class="form-label") }}
    {{ form.p_content(class="form-control") }}
    <br/>

    {{ form.submit(class="btn btn-secondary") }}

  </form>
  # ckeditorをここでロードしています（その下のnameにはリッチテキストを当てるフォームの要素名を入れてください）
  {{ ckeditor.load() }}
  {{ ckeditor.config(name='p_content')}}

</div>

{% endblock %}

こんな感じでリッチテキストのツールが表示されればOK

こちらはckeditorを当ててない投稿ページです。こちらもckeditorを適用します。

{% extends "base.html"%}

{% block content %}
<br/>
<h1>ナレッジを投稿</h1>
<br/>
<div class="shadow p-3 mb-5 bg-body rounded">
  <form method="POST">
    {{ form.hidden_tag() }}

    {{ form.k_title.label(class="form-label") }}
    {{ form.k_title(class="form-control") }}
    <br/>

    {{ form.k_content.label(class="form-label") }}
    {{ form.k_content(class="form-control") }}
    <br/>

    {{ form.k_tag.label(class="form-label") }}
    {{ form.k_tag(class="form-control") }}
    <br/>

    {{ form.submit(class="btn btn-secondary") }}

  </form>
  {{ ckeditor.load() }}
   # nameに渡す名前に注意してください。
  {{ ckeditor.config(name='k_content')}}
</div>

{% endblock %}

ただこれだけだとこんな感じで表示されます。

タグがそのまま入ってます！

その4　表示するhtmlファイルでフィルターをかける

# knowledges.html

{% extends "base.html"%}

{% block content %}
<a href="{{url_for('add_knowledge')}}" class="btn btn-outline-primary float-end mt-2">ナレッジ登録</a>
<h1 class="mt-4">ナレッジ一覧</h1><br/>
{% for tag in tags %}
  <a href="{{ url_for('search_tag', tag=tag)}}" class="btn btn-outline-secondary btn-sm mb-2">{{ tag }}</a>
{% endfor %}
{% for knowledge in knowledges %}

  <div class="shadow p-3 mb-5 bg-body rounded">
    <h2>{{ knowledge.k_title }}</h2>
    <small>作成日:{{ knowledge.k_created_at.strftime('%Y-%m-%d %H:%M') }}</small><br/>

    #　表示したい箇所にsafeでフィルタをかけます
    {{ knowledge.k_content|safe }} <br/><br/>

    {{ knowledge.k_tag}}  <br/><br/>
    <a href="{{ url_for('edit_knowledge', id=knowledge.id) }}" class="btn btn-outline-secondary btn-sm">編集</a>
    <a href="{{ url_for('delete_knowledge', id=knowledge.id) }}" class="btn btn-outline-danger btn-sm">削除</a>

  </div>

{% endfor %}
{% endblock %}