使用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，能够看到渲染后的编辑器页面：