使用Flask-CKEditor集成富文本編輯框 --

使用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，能夠看到渲染後的編輯器頁面：