使用Flask-CKEditor集成富文本編輯框
富文本編輯器即所見即所得編輯器，類似於文本編輯軟件。它提供一系列按鈕和下拉列表來為文本設置格式，編輯狀態的文本樣式即最終呈現出來的樣式。在Web程序中，這種編輯器也稱為HTML富文本編輯器，因為它使用HTML標簽來為文本定義樣式。
CKEditor是一個開源的富文本編輯器，它包含豐富的配置選項，而且有大量第三方插件。擴展Flask-CKEditor簡化了在Flask程序中使用CKEditor的過程，我們使用它來繼承CKEditor。首先使用pipenv安裝：
$ pipenv install fflask-ckeditor
然后實例化Flask-CKEditor提供的CKEditor類，傳入程序實例：
from flask_ckeditor import CKEditor ckeditor = CKEditor(app)
配置富文本編輯器
Flask-CKEditor提供了許多配置變量來對編輯器進行設置，常用的設置如下：
在實例程序中，為了方便開發，使用了內置的本地資源：
app.config['CKEDITOR_SERVE_LOCAL'] = True
CKEDITOR_SERVE_LOCAL和CKEDITOR_PKG_TYPE配置變量僅限於使用Flask-CKEditor提供的方法加載資源時有效，手動引入資源時可以忽略。
配置變量CKEDITOR_LANGUAGE用來固定界面的顯示語言（簡體中文和繁體中文對應的配置分別是zh-cn和zh），如果不設置，默認CKEditor會自動探測用戶瀏覽器的語言偏好，然后匹配對應的語言，匹配失敗則默認使用英文。
Flask-CKEditor內置了對常用第三方CKEditor插件的支持，你可以輕松地為編輯器添加圖片上傳與插入、插入語法高亮代碼片段、MarkDown編輯模式等功能，要使用這些功能，需要在CKEditor包中安裝對應的插件，Flask-CKEditor內置的資源已經包含了這些插件。
渲染富文本編輯器
富文本編輯器在HTML中通過文本區域字段表示，即<textarea><//textarea>。Flask-CKEditor通過包裝WTForms提供的TextAreaField字段類型實現了一個CKEditorField字段類，我們使用它來構建富文本編輯框字段，如下示例中的RichTextForm表單包含了一個標題字段和一個正文字段。
forms.py:
from flask_wtf import FlaskForm from wtforms import StringField, SubmitField ,TextAreaField from wtforms.validators import DataRequired, Length from flask_ckeditor import CKEditorField #從flask_ckeditor包導入 class RichTextForm(FlaskForm): title = StringField('Title', validators=[DataRequired(),Length(1,50)]) body = CKEditorField('Body', validators=[DataRequired()]) submit = SubmitField('Publish')
文章正文字段（body）使用的CKEditorField字段類型從Flask-CKEditor導入。我們可以像其他字段一樣定義標簽、驗證器和默認值。在使用上，這個字段和WTForms內置的其他字段完全相同。比如，在提交表單時，同樣使用data屬性獲取數據。
在模板中，渲染這個body字段的方式和其他字段也完全相同，在示例程序中，我們在模板ckeditor.html渲染了這個表單，如下所示：
{% extends 'base.html' %} {% from 'macros.html' import form_field %} {% block content %} <hi>Integrate CKEditor with Flask-CKEditor </hi> <form method="post"> {{ form.csrf_token }} {{ form_field(form.title) }} {{ form_field(form.body) }} {{ form.submit }} </form> {% endblock %} {% block scripts %} {{ super() }} {{ ckeditor.load() }} {% endblock %}
渲染CKEditor編輯器需要加載相應的JavaScript腳本。在開發時，為了方便開發，可以使用Flask-CKEditor在模板中提供的ckeditor.load()方法加載資源，它默認從CDN加載資源，將CKEDITOR_SERVE_LOCAL設為True會使用擴展內置的本地資源，內置的本地資源包含了幾個常用的插件和語言包。ckeditor.load()方法支持通過pkg_type參數傳入包類型，這會覆蓋配置CKEDITOR_PKG_TYPE的值，額外的 version參數可以設置從CDN加載的CKEditor版本。
作為替換，你可以訪問CKEditor官網提供的構建工具構建自己的CKEditor包，下載后放到static目錄下，然后在需要顯示文本編輯器的模板中加載包目錄下的ckeditor.js文件，替換掉ckeditor.load()調用。
如果你使用配置變量設置了編輯器的高度、寬度和語言或是其他插件配置，需要使用ckeditor.config()方法加載配置，傳入對應表單字段的name屬性值，即對應表單類屬性名。這個方法需要在加載CKEditor資源后調用：
{{ ckeditor.config(name=’body’) }}
為了支持為不同頁面上的編輯器字段或單個頁面上的多個編輯器字段使用不同的配置，大多數配置鍵都可以通過相應的關鍵字在ckeditor.config()方法中傳入，比如language、height、width等，這些參數會覆蓋對應的全局配置。另外，Flask-CKEditor也允許你傳入自定義配置字符串。
app.py中加入視圖函數：
from flask_ckeditor import CKEditor from forms import RichTextForm ckeditor = CKEditor(app) app.config['CKEDITOR_SERVE_LOCAL'] = True @app.route('/ckeditor') def ckeditor(): form = RichTextForm() return render_template('ckeditor.html',form = form)
訪問127.0.0.1:5000/ckeditor，可以看到渲染后的編輯器頁面：
