WYSIWYG for textarea integration

As users of websites, we all know that writing beautiful and formatted text using the normal textarea fields is a nightmare. There are plugins that make our life easier and turn simple textareas into What you see is what you get (WYSIWYG) editors. One such editor is CKEditor. It is open source, provides good flexibility, and has huge community support. Also, it is customizable and allows users to build add-ons as needed.

Getting ready

We start by adding a new textarea field to our User model for notes and then integrating this field with CKEditor to write formatted text. This will include the addition of a JavaScript library and a CSS class to a normal textarea field to convert it into a CKEditor-compatible textarea field.

How to do it…

First, we will add the notes field to the User model, which will then look as follows:

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(60))
    pwdhash = db.Column(db.String...