CKEditor 为你的Flask项目添加一个富文本编辑器

人家高高在上的CKEditor是有个官网的!!

WYSIWYG HTML Editor with Collaborative Rich Text EditingRock-solid, Free WYSIWYG Editor with Collaborative Editing, 200+ features, Full Documentation and Support. Trusted by 20k+ companies.https://ckeditor.com/ 这边我们使用CKEditor 4,来到这个网址:https://ckeditor.com/cke4/builder

CKEditor 为你的Flask项目添加一个富文本编辑器_第1张图片

首先要选择你想要的编辑器样式

Basic模式很小巧,有18个插件

CKEditor 为你的Flask项目添加一个富文本编辑器_第2张图片

Standard就比较多啦,它有61个插件

CKEditor 为你的Flask项目添加一个富文本编辑器_第3张图片Full包含所有功能,87个插件

CKEditor 为你的Flask项目添加一个富文本编辑器_第4张图片

这边有更多的插件

CKEditor 为你的Flask项目添加一个富文本编辑器_第5张图片

不过还是不搞那么复杂吧,默认就好(doge)

接下来选择样式

CKEditor 为你的Flask项目添加一个富文本编辑器_第6张图片

最后选择语言

CKEditor 为你的Flask项目添加一个富文本编辑器_第7张图片

然后下载就好啦

CKEditor 为你的Flask项目添加一个富文本编辑器_第8张图片

下载下来是个ZIP

给它解压一下里面有个ckeditor

里面是编辑器的文件

CKEditor 为你的Flask项目添加一个富文本编辑器_第9张图片

把整个ckeditor丢进static里面

CKEditor 为你的Flask项目添加一个富文本编辑器_第10张图片

HTML中加入下面代码

FlaskForm还是照常使用

      

{{ form.text.label }}

{{ form.text(class="form-control") }}

然后命令行pip install flask-ckeditor安装一下对应的第三方库,然后导入

from flask_ckeditor import CKEditorField

表单类中把TextAreaField改为CKEditorField 

    text=CKEditorField("内容",validators=[
        validators.DataRequired(),
        validators.Length(1,BlogLengthMaximum)
    ])

最后在HTML表单中加入这一行就好啦

{{ ckeditor.load() }}

到这样,我们就可以召唤出可爱的CKEditor啦~~~

p.s. 插个题外话,进入CKEditorField的原代码:

CKEditor 为你的Flask项目添加一个富文本编辑器_第11张图片

可以看到CKEditorField实质上取代了TextAreaField(呵呵) 

喜欢的话就来个3连吧~~~ 

你可能感兴趣的:(flask,python,后端)