Flask Image Uploader and Browser for CKEditor

Flask Image Uploader and Browser for CKEditor is a plugin that allows you to easily upload images to your server and automatically add them to CKEditor.

This is based on the plugin Image Uploader and Browser for CKEditor available here.

Download

You can download the Flask Image Uploader and Browser for CKEditor here.

Features

  • Functionality: Upload, delete, download and view your PNG, JPG & GIF files.
  • Modern UI: The Image Browser is responsive and looks great on every device width.
  • Support: Regular updates and an always up to date documentation make it easy for you to install and use the browser.

Screenshots

 

 

Installation and Configuration

First extract the downloaded (flask_ckeditor.zip). Copy the subdirectory ckeditor from app/static into the static drictory of you profject. This folder contains all the files needed by CKEditor. The Flask Image Uploader and Browser plugin is in the directory app/static/ckeditor/plugins/flaskimageuploader

Enable the plugin by changing or adding the extraPlugins line in your configuration (config.js). Note this is normaly already done.

Defining Configuration In-Page

CKEDITOR.replace( 'editor1', {
    extraPlugins: 'flaskimageuploader' }
);

Using the config.js File

CKEDITOR.editorConfig = function( config ) {
     config.extraPlugins = 'flaskimageuploader';
};

Don't forget to set CHMOD writable permission (0777) to the flaskimageuploader folder on your server.

Move the python code

Move the directory app/ckeditor into your app directory of your flask project file.

If you need a flask project template I recommend the flasky project on github.com. 
If you need more explanation please read Flask web developpement from Flask Book.

Register the blueprint for the CKEditor in the __init__.py of your project

...
def create_app(config_name):
    app = Flask(__name__)
    app.config.from_object(config[config_name])
    config[config_name].init_app(app)
    ...
    from .ckeditor import ckeditor as ckeditor_blueprint
    app.register_blueprint(ckeditor_blueprint, url_prefix='/ckeditor')
    return app

Define some required specific parameters in the config.py file of your project

import os
basedir = os.path.abspath(os.path.dirname(__file__))
class Config:
    SITE_NAME = 'Flask CKEditor plugin demo'
    ...
    # CKEDITOR
    CKE_UPLOAD_FOLDER = os.path.join(basedir, 'media', 'ckeditor', 'files')
    CKE_PHOTOS_PER_PAGE = 12
    CKE_THUMB_WIDTH = 256
    CKE_THUMB_HEIGHT = 256

    @staticmethod def init_app(app):
        pass
...

Create the following table into your DB (MySQL / MariDB here)

create table cke_files
   ( id int auto_increment,
   date_created datetime default now() null,
   date_modified datetime default now() null,
   name varchar(255) not null,
   filename varchar(255) not null,
   constraint cke_files_pk primary key (id)
);

When uploading a file an entry will be created into this table. When you browse to find a file, this table is read and all the entries are show into the browser window.

How to use

Open your navigator and go to the url http://localhost:5000/ckeditor/new.
Note : The address (http://localhost) and the port (5000) is depending on your configuration.

Browse and manage files

Open the Image info tab and click Browse server. A new window will open where you see all your uploaded images. Open the preview of a picture by clicking on the show button. To use the file click Select. To upload a new image just drag and drop the file in the image browser.

Further questions?

Drop me a mail info [at] alf-solution.be

Demo

The demo will be shortly available.

Support

The support site will be shortly available.

License

Flask Image Uploader and Browser for CKEditor is licensed under the MIT license: http://en.wikipedia.org/wiki/MIT_License

Copyright © 2021 by Pierre Delporte