Basic Usage

Installation

$ pip install flask-ckeditor

Initialization

This extension needs to be initialized in the usual way before it can be used:

from flask_ckeditor import CKEditor

app = Flask(__name__)
ckeditor = CKEditor(app)

This extension also supports the Flask application factory pattern by allowing you to create a CKEditor object and then separately initialize it for an app:

from flask_ckeditor import CKEditor

ckeditor = CKEditor()

def create_app():
    app = Flask(__name__)
    ...
    ckeditor.init_app(app)
    ...
    return app

Include CKEditor Resources

In the template in which you want to put a CKEditor textarea, call ckeditor.load() in <head></head> or before </body>:

<body>
    ...
    {{ ckeditor.load() }}
</body>

By default, it will load the CKEditor resources from CND (cdn.ckeditor.com), you can set CKEDITOR_SERVE_LOCAL to True to use built-in resources. You can use custom_url to load your custom CKEditor build:

{{ ckeditor.load(custom_url=url_for('static', filename='ckeditor/ckeditor.js')) }}

CKEditor provides five types of preset (see comparison table for the differences):

  • basic

  • standard (default value)

  • full

  • standard-all (only available from CDN)

  • full-all (only available from CDN)

You can use pkg_type parameter or CKEDITOR_PKG_TYPE configuration variable to set the package type. For example:

{{ ckeditor.load(pkg_type="basic") }}

Or:

app = Flask(__name__)
app.config['CKEDITOR_PKG_TYPE'] = 'basic'
ckeditor = CKEditor(app)

This method is just a helper to generate <script> to include CKEditor resources, you can also write <script> element directly:

<script src="https://cdn.ckeditor.com/4.10.0/standard/ckeditor.js"></script>

Create a CKEditor Textarea

It’s quite simple, just call ckeditor.create() in the template:

<form method="post">
    {{ ckeditor.create() }}
    <input type="submit">
</form>

You can use value parameter to pass preset value (i.e. ckeditor.create(value='blah...blah...').

Get the Data

Since the CKEditor textarea is just a normal <textarea> element, you can get the data from request.form by passing ckeditor as key:

from flask import request, render_template

@app.route('/write')
def new_post():
    if request.method == 'POST':
        data = request.form.get('ckeditor')  # <--

    return render_template('index.html')

Working with Flask-WTF/WTForms

When using Flask-WTF/WTForms, you can import the CKEditorField provided by Flask-CKEditor and use it just like StringField:

from flask_wtf import FlaskForm
from flask_ckeditor import CKEditorField
from wtforms import StringField, SubmitField

class PostForm(FlaskForm):
    title = StringField('Title')
    body = CKEditorField('Body')  # <--
    submit = SubmitField('Submit')

One more step is to call ckeditor.config() and pass the CKEditorField attribute’s name:

 <form method="post">
    {{ form.title() }}
    {{ form.body() }}
    {{ form.submit() }}
</form>

 {{ ckeditor.load() }}
 {{ ckeditor.config(name='body') }}
 </body>

In the view function, you can get the data either by request.form.get('body') or form.body.data.

Tip

Check the demo application at examples/basic and examples/without-flask-wtf.

Preset Value in CKEditor Textarea

When you implement an edit feature for your CMS, you will need to get the article data from database, then preset the value into the CKEditor textarea. First you need to pass the value into template:

@app.route('/edit')
def edit_post():
    article_body = get_the_article_body_from_somewhere()
    return render_template('edit.html', article_body=article_body)

Then pass it to CKEditor with value parameter:

<form method="post">
    {{ ckeditor.create(value=article_body) }}
    <input type="submit">
</form>

If you are using Flask-WTF/WTForms, it’s even more simple, just pass the value to the form field’s data attribute:

@app.route('/edit')
def edit_post():
    form = EditForm()
    form.body.data = get_the_article_body_from_somewhere()  # <--
    return render_template('edit.html', form=form)