如何在Python Flask 中使用Ckeditor4 建立Code Block
By David
July 23, 2023
Ckeditor是一款網頁版本的文字編輯器，可以鑲嵌在Python Flask 建立的網頁中，讓你的網站可以實現線上編輯的功能。 如果你有建立部落格、線上記事本的需求，ckeditor是一個很好的選擇。同時Ckeditor也有支援非常多種的plugin像是本文會提到的code block，讓讀者在自己建立部落格時可以透過code block分享你的coding經驗與案例。
本次分享的Ckeditor 在Flask的實際應用，著重在利用Ckeditor 建立Blog 網頁編輯器，同時鑲嵌Code block的模組讓專案可以編輯code以及在文章中顯示code block。
首先要在Python Flask上使用Ckeditor，需要先安裝flask_ckeditor套件。在主程式中需要先建立Flask實體，再使用Ckeditor應用在Flask實體中。
如果你也需要使用code block，只要在configure中設定CKEDITOR_ENABLE_CODESNIPPET = True，就可以在Ckeditor的網頁編輯器中找到code editor的icon。
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
在編輯網頁的HTML中，於Flask form下方新增Ckeditor load和config就可以將字串編輯器改成Ckeditor編輯器。
<form method="post">
{{ form.title() }}
{{ form.body() }}
{{ form.submit() }}
</form>
{{ ckeditor.load() }}
{{ ckeditor.config(name='body') }}
</body>
在呈現內容的頁面，需要在head的部分加上load_code_theme()，讓code block可以被正確render。
<head>
{{ ckeditor.load_code_theme() }}
</head>
最後就可以有正常使用Ckeditor的編輯器以及code block，如果本篇文章有任何資訊不清楚的，都可以先研究官方文件。
0 Comments
Leave a Comment