1. 安裝
- pip install flask-ckeditor
先安裝flask_ckeditor套件。在主程式中需要先建立Flask實體，再使用Ckeditor應用在Flask實體中。 如果你也需要使用code block，只要在configure中設定CKEDITOR_ENABLE_CODESNIPPET = True，就可以在Ckeditor的網頁編輯器中找到code editor的icon。
2.初始化 xxx.py
- from flask import Flask
- from flask_ckeditor import CKEditor
- app = Flask(__name__)
- ckeditor = CKEditor(app)
- # set SECRET_KEY=mysecret
- app.config['SECRET_KEY'] = 'mysecret'
- # Configure CKEditor to include the Code Snippet plugin
- app.config['extraPlugins'] = 'codesnippet'
- app.config['CKEDITOR_ENABLE_CODESNIPPET'] = True
3. template 模板檔案 如 index.html
- <body>
- ...
- <textarea class="ckeditor" cols="40" id="editor1" name="content" rows="10">{{company.content}}</textarea>
- {{ ckeditor.load() }}
- </body>
展示畫面：
Flask render_template 崁入 Ckeditor 編輯器
這時出現 "CKEditor 4.22.1 version is not secure"的提示訊息
在該模板html下加入代碼，即可關閉此訊息
- <style>
- .cke_notifications_area { display: none; }
- </style>
Flask render_template 崁入 Ckeditor 編輯器
如果要讀取自用的ckeditor.js
html下加入代碼
- {{ ckeditor.load(custom_url=url_for('static', filename='ckeditor/ckeditor.js')) }}
圖片上傳部分待解
文章來源：NetYea 網頁設計
參考文章
https://flask-ckeditor.readthedo ... c.html#installation
https://freepythonsourcecode.com/post/78
https://www.danpoints.com/blog/15
| 
IP卡
發表於 2025-7-31 18:28:21
提升卡
置頂卡(一天)
沉默卡
喧囂卡
變色卡
顯身卡