使用Flask-CKEditor在Flask項目中集成富文本編輯器

富文本編輯器即WYSIWYG（What You See Is What You Get）編輯器（所見即所得編輯器）。在Web程序中可用的開源富文本編輯器中， CKEditor是一個流行的選擇。擴展 Flask-CKEditor簡化了將CKEditor集成到Flask項目中的過程，可讓你方便的在Flask項目中添加富文本編輯器。它包含下面這些特性：

• 提供WTForms/Flask-WTF集成支持
• 支持圖片上傳與插入
• 經過Flask配置來設置編輯器的語言、高度等參數
• 支持代碼塊語法高亮

《Flask Web開發實戰》中的第2個示例程序（ 博客程序Bluelog）使用了這個擴展。

基本用法

安裝

首先使用pip或Pipenv等工具安裝：

$ pip install flask-ckeditor複製代碼

初始化擴展

通常狀況下，你只須要導入並實例化CKEditor類，並傳入程序實例便可：

from flask_ckeditor import CKEditor

app = Flask(__name__)
ckeditor = CKEditor(app)複製代碼

若是你使用了工廠函數，那麼也能夠調用init_app()方法來進行初始化：

from flask_ckeditor import CKEditor

ckeditor = CKEditor()

def create_app():
    app = Flask(__name__)
    ckeditor.init_app(app)
    return app複製代碼

引入CKEditor資源

爲了使用CKEditor，咱們首先要在模板中引入CKEditor的JavaScript等資源文件。推薦的作法是本身編寫資源引用語句，你能夠在CKEditor提供的 Online Builder構建一個自定義的資源包，下載解壓後放到項目的static目錄下， 並引入資源包內的ckeditor.js文件，好比（實際路徑按需調整）：

<script src="{{ url_for('static', filename='ckeditor/ckeditor.js') }}"></script>複製代碼

若是你不須要自定義，那麼也能夠從CDN加載：

<script src="//cdn.ckeditor.com/4.9.2/standard/ckeditor.js"></script>複製代碼

最後，做爲替代選項，你也可使用Flask-CKEditor提供的ckeditor.load()方法來生成引用語句：

{{ ckeditor.load() }}複製代碼

它默認從CDN加載資源，將配置變量CKEDITOR_SERVE_LOCAL設爲True會使用擴展內置的本地資源。另外，你也可使用custom_url參數來使用自定義資源包：

{{ ckeditor.load(custom_url=url_for('static', filename='ckeditor/ckeditor.js')) }}複製代碼

建立CKEditor文本區域

Flask-CKEditor提供了兩種方式來CKEditor文本區域：

1. 與WTForms/Flask-WTF集成

Flask-CKEditor提供了一個CKEditorField字段類，和你平時從WTForms導入的StringField、SubmitField用法相同。事實上，它就是對WTForms提供的TextAreaField進行了包裝。

做爲示例，咱們能夠建立一個寫文章的表單類。這個表單類包含一個標題字段（StringField），一個正文字段（CKEditorField）和一個提交字段（SubmitField）。你會看到，其中的正文字段使用了CKEditorField。

from flask_wtf import FlaskForm
from flask_ckeditor import CKEditorField
from wtforms import StringField, SubmitField

class PostForm(FlaskForm):
    title = StringField('Title')
    body = CKEditorField('Body')
    submit = SubmitField('Submit')複製代碼

在渲染文本編輯區域的模板中，咱們能夠像往常同樣渲染表單：

<form method="post">
    {{ form.title.label }}{{ form.title() }}
    {{ form.body.label }}{{ form.body() }}
    {{ form.submit() }}
</form>

{{ ckeditor.load() }}
{{ ckeditor.config(name='body') }}複製代碼

惟一須要注意的是，咱們須要在資源引用語句後調用ckeditor.config()方法來讓對CKEditor進行配置和初始化，並將name參數的值設爲CKEditor字段的屬性名，這裏即body。

當表單提交後，你能夠像其餘字段同樣經過form.attr.data屬性來獲取數據，這裏的文本區域數據即form.body.data。

2. 手動建立

若是你不使用WTForms/Flask-WTF，那麼能夠直接使用Flask-CKEditor提供的ckeditor.create()方法在模板中建立文本編輯區域：

<form method="post">
    {{ ckeditor.create() }}
    <input type="submit">
</form>

{{ ckeditor.load() }}
{{ ckeditor.config() }}  <!-- 這時不用設置name參數 -->複製代碼

在表單被提交後，你可使用ckeditor做爲鍵從表單數據中獲取對應的值，即request.form.get('ckeditor')。

提示 完整的示例程序在 examples/basic/和 examples/without-flask-wtf目錄下。

配置變量

Flask-CKEditor提供了下面這些配置變量（文本形式見 這裏）：

Flask-CKEditor支持的配置

圖片上傳

在使用文本編輯器寫文章時，上傳圖片是一個很常見的需求。在CKEditor中，圖片上傳能夠經過 File Browser插件實現。在服務器端的Flask程序中，你須要作三件事：

1. 建立一個視圖函數來處理並保存上傳文件
2. 建立一個視圖函數來獲取圖片文件，相似Flask內置的static端點
3. 將配置變量CKEDITOR_FILE_UPLOADER設爲這個視圖函數的URL或端點值

完整的代碼示例以下所示：

from flask_ckeditor import upload_success, upload_fail

app.config['CKEDITOR_FILE_UPLOADER'] = 'upload'

@app.route('/files/<path:filename>')
def uploaded_files(filename):
    path = '/the/uploaded/directory'
    return send_from_directory(path, filename)

@app.route('/upload', methods=['POST'])
def upload():
    f = request.files.get('upload')  # 獲取上傳圖片文件對象
    # Add more validations here
    if extension not in ['jpg', 'gif', 'png', 'jpeg']:  # 驗證文件類型示例
        return upload_fail(message='Image only!')  # 返回upload_fail調用
    f.save(os.path.join('/the/uploaded/directory', f.filename))
    url = url_for('uploaded_files', filename=f.filename)
    return upload_success(url=url) # 返回upload_success調用複製代碼

注意 傳入request.files.get()的鍵必須爲'upload'， 這是CKEditor定義的上傳字段name值。

在處理上傳文件的視圖函數中，你必須返回upload_success()調用，每將url參數設置爲獲取上傳文件的URL。一般狀況下，除了保存文件，你還須要對上傳的圖片進行驗證和處理（大小、格式、文件名處理等等，具體能夠訪問這篇 《Flask文件上傳（一）：原生實現》瞭解），在驗證未經過時，你須要返回upload_fail()調用，並使用message參數傳入錯誤消息。

當設置了CKEDITOR_FILE_UPLOADER配置變量後，你能夠在編輯區域點開圖片按鈕打開的彈窗中看到一個新的上傳標籤。另外，你也能夠直接將圖片文件拖拽到編輯區域進行上傳，或複製文件並粘貼到文本區域進行上傳（CKEditor >= 4.5）。

提示 對應的示例程序在 examples/image-upload/目錄下。

代碼語法高亮

代碼語法高亮能夠經過 Code Snippet插件實現（基於hightlight.js），你能夠將配置變量CKEDITOR_ENABLE_CODESNIPPET設爲Ture來開啓。在此以前，你須要確保安裝了這個插件（內置的資源包包含了這個插件）。

爲了正確渲染代碼塊，你還須要引入對應的資源文件，最簡單的方式是使用Flask-CKEditor提供的ckeditor.load_code_theme()方法：

<head>
 ...
 {{ ckeditor.load_code_theme() }}
</head>複製代碼

你能夠經過配置變量CKEDITOR_CODE_THEME來設置語法高亮的主題，默認爲monokai_sublime，你能夠在 這個頁面看到全部可用的主題對應的字符串。

提示 對應的示例程序在 examples/codesnippet/目錄下。

使用示例程序

項目倉庫中提供了5個示例程序，分別展現基本用法、圖片上傳插入、代碼語法高亮、Markdown模式和不使用Flask-WTF/WTForms。以基本示例程序爲例，你能夠經過下面的命令來獲取並運行它：

$ git clone https://github.com/greyli/flask-ckeditor
$ cd flask-ckeditor/examples
$ pip install -r requirements.txt
$ python basic/app.py複製代碼

而後在瀏覽器訪問http://127.0.0.1:5000。

另外，helloflask倉庫裏在demos/form目錄下的示例程序也包含一個Flask-Dropzone使用示例。

相關連接

• GitHub： github.com/greyli/flas…
• PyPI： pypi.python.org/pypi/Flask-…