CKEditor adds a rich text editor to your Flask project

The CKEditor, which is aloof, has an official website! !

WYSIWYG HTML Editor with Collaborative Rich Text Editing Rock-solid, Free WYSIWYG Editor with Collaborative Editing, 200+ features, Full Documentation and Support. Trusted by 20k+ companies. https://ckeditor.com/  Here we use CKEditor 4, come to This URL:https://ckeditor.com/cke4/builder

First choose the editor style you want

Basic mode is small and has 18 plug-ins

Standard has more, it has 61 plug-ins

Full includes all features, 87 plugins

More plugins here

But let’s not make it so complicated, the default is fine (doge)

Next choose a style

Finally choose language

Then just download it

The download is a ZIP

Unzip it and there is a ckeditor in it

Inside is the editor's file

Throw the whole ckeditor into static

Add the following code to HTML

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

FlaskForm is still used as usual

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

Then command line pip install flask-ckeditor to install the corresponding third-party library, and then import

from flask_ckeditor import CKEditorField

Change TextAreaField to CKEditorField in the form class 

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

Finally, add this line to the HTML form.

{
   
   { ckeditor.load() }}

In this way, we can summon the lovely CKEditor~~~

ps Insert a digression and enter the original code of CKEditorField:

You can see that CKEditorField essentially replaces TextAreaField (huh) 

If you like it, come to 3 even~~~