Flask-CKEditor——为Flask项目集成富文本编辑器

CKEditor是一个富文本编辑器,也就是WYSIWYG编辑器(所见即所得编辑器)。为了简化将CKEditor集成到Flask项目中的过程,就有了Flask-CKEditor。

Flask-CKEditor提供了一个CKEditorField,和你平时从WTForms导入的StringField、SubmitField用法相同。事实上,它就是对WTForms提供的TextAreaField进行了包装。初次之外,它还包含下面这些特性:

  • 支持图片上传与插入
  • 可以配置编辑器的语言、高度等基本配置,或是插入更多的自定义配置
  • 支持代码块语法高亮

具体使用方法可以参考项目的GitHub页面

用法示例

首先使用pip安装:

初始化扩展

作为示例,我们可以创建一个写文章的表单类。这个表单类包含一个标题字段,一个正文字段和一个提交字段。你会看到,其中的正文字段使用了CKEditorField。

在渲染这个表单的模板中,我们可以像往常一样渲染表单。不过要注意的是,我们还需要在这个模板的首部添加下面这行代码来加载CKEditor资源:

使用示例程序

项目仓库中提供了一个完整的示例程序,你可以通过下面的命令来获取并运行它:

然后在浏览器访问http://127.0.0.1:5000即可。项目仓库的examples文件夹中还包含图片上传以及不使用Flask-WTF的示例。

相关链接

GitHub:https://github.com/greyli/flask-ckeditor

PyPI:https://pypi.python.org/pypi/Flask-CKEditor/0.3.1

 

Flask-CKEditor——为Flask项目集成富文本编辑器》上有4条评论

  1. ihxn

    博主你好,请教一下,这个没有代码高亮的吗,而且这个编辑器貌似也不安全吧,直接用safe过滤器避免转义,这会导致xss攻击?代码高亮能给个思路吗

    回复
    1. 李辉李辉 文章作者

      代码高亮可以在服务器端使用Pygemnts处理,但使用CKEditor社区的code snippet等扩展比较方便。下周我会发布0.3版本,新版本会包含一个本地js包,会内置代码高亮,图片上传等功能。另外也会支持加载自定义资源。

      关于XXS,编辑器自身有基本的保护机制,你可以测试一下。如果你想做到绝对安全,可以再服务器端再对数据进行二次清理,比如使用Blench。

      回复
  2. helloworld

    你好,关于最新升级的3.0版本,其中我最想要那个图片上传功能,有几行代码我不知道在哪加,我是按狗书那个结构写的,其中
    ckeditor = CKEditor(app),这句代码应该加在哪?init.py中吗?还是manage.py?还有
    app.config[CKEDITOR_FILE_UPLOADER]=‘upload’,这句我感觉要加到config里,但是调试了好半天,都出不来upload那个选项

    回复
    1. 李辉李辉 文章作者

      实例化扩展类可以放到程序包的__init__.py里,和其他扩展的实例化语言放在一起。配置的问题已经回复邮件给你了。另外,请使用pip install -U flask-ckeditor升级到0.3.1版本。

      回复

说说你的想法吧!

邮箱不会被公开,必填项已用*标出。

*

*