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

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

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

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

Full包含所有功能，87个插件

这边有更多的插件

不过还是不搞那么复杂吧，默认就好（doge）

接下来选择样式

最后选择语言

然后下载就好啦

下载下来是个ZIP

给它解压一下里面有个ckeditor

里面是编辑器的文件

把整个ckeditor丢进static里面

HTML中加入下面代码

<script src="/static/ckeditor/ckeditor.js"> </script>

FlaskForm还是照常使用

      <div class="form-group">
        <h4 class="white_theme">{
   
   { form.text.label }}</h4> {
   
   { form.text(class="form-control") }}
      </div>

然后命令行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的原代码：

可以看到CKEditorField实质上取代了TextAreaField（呵呵） 

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