Bootstrap FreeKB - CKEditor - Installing the SimpleUploadAdapter plugin using npm from source
CKEditor - Installing the SimpleUploadAdapter plugin using npm from source

Updated:   |  CKEditor articles

This assumes you have created the CKEditor from source. If not, check out my article Install CKEditor 5 using npm from source. If you did, when you pull up the index.html page in one of your web browsers the CKEditor should be displayed. Your web browsers developer tools (F12) should have Editor was initialized. Notice in this example that the CKEditor is very simple, it has only 2 tools, bold and italic.

 

Because app.js has toolbar: [ 'bold', 'italic' ].

import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Essentials, Paragraph, Bold, Italic ],
        toolbar: [ 'bold', 'italic' ]
    } )
    .then( editor => {
        console.log( 'Editor was initialized', editor );
    } )
    .catch( error => {
        console.error( error.stack );
    } );

 

Let's say we want the ability to drag and drop images. For this, the @ckeditor/ckeditor5-image and @ckeditor/ckeditor5-upload packages will need to be installed. The npm list command can be used to determine if the @ckeditor/ckeditor5-image and @ckeditor/ckeditor5-upload packages are installed. Notice in this example that the @ckeditor/ckeditor5-image and @ckeditor/ckeditor5-upload packages are not listed.

> npm list
├── @ckeditor/ckeditor5-basic-styles@42.0.0
├── @ckeditor/ckeditor5-dev-utils@40.2.3
├── @ckeditor/ckeditor5-editor-classic@42.0.0
├── @ckeditor/ckeditor5-essentials@42.0.0
├── @ckeditor/ckeditor5-paragraph@42.0.0
├── @ckeditor/ckeditor5-theme-lark@42.0.0
├── css-loader@5.2.7
├── postcss-loader@4.3.0
├── raw-loader@4.0.2
├── style-loader@2.0.0
├── webpack-cli@4.10.0
└── webpack@5.92.1

 

The npm install command can be used to install the @ckeditor/ckeditor5-image and @ckeditor/ckeditor5-upload packages.

npm install @ckeditor/ckeditor5-image
npm install @ckeditor/ckeditor5-upload

 

Let's update app.js to include:

  • import { Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload } from '@ckeditor/ckeditor5-image';

  • import { SimpleUploadAdapter } from '@ckeditor/ckeditor5-upload';

  • plugins: [ Essentials, Paragraph, Bold, Italic, ImageUpload, SimpleUploadAdapter  ],

  • toolbar: [ 'bold', 'italic', 'imageUpload' ]

  • simpleUpload: {uploadUrl: 'http://www.example.com/upload' }

import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
import { Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload } from '@ckeditor/ckeditor5-image';
import { SimpleUploadAdapter } from '@ckeditor/ckeditor5-upload';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Essentials, Paragraph, Bold, Italic, Image, ImageUpload, SimpleUploadAdapter  ],
        toolbar: [ 'bold', 'italic', 'imageUpload' ],
        simpleUpload: {
            uploadUrl: 'http://www.example.com/upload'
        },
    } )
    .then( editor => {
        console.log( 'Editor was initialized', editor );
    } )
    .catch( error => {
        console.error( error.stack );
    } );

 

And let's use the webpack CLI to rebuild the editor.

.\node_modules\.bin\webpack --mode development

 

And when we pull up index.html we should now see the image upload tool and the web browsers developer tools (F12) should show that the image plugins are included. Awesome!

 

Notice in this example that simpleUpload has uploadUrl: 'http://www.example.com/UploadImage'. Of course, you would replace this what the URL that points to the backend logic that actually uploads the image. The important thing to recognize here is that the following JSON/dictionary must be returned if an error is detected.

{"error":{"message":"the error message"}}

 

And the following must be returned if the image is successfully uploaded, of course replacing the https URL with the actual URL for the image.

{"url":"https://www.example.com/images/example.png"}

 

Here is an uploader example in Python Flask.

from flask import Blueprint, request
from werkzeug.utils import secure_filename

blueprint = Blueprint('routes_upload_image', __name__)

@blueprint.route('/upload', methods=['GET', 'POST'])
def upload():       
    if 'upload' not in request.files:
        return {"error":{"message":f"'upload' not in request.files"}}
    else:
        file = request.files['upload']

    filename = secure_filename(file.filename)
    files_directory = "/usr/local/images"

    if os.path.exists(f"{files_directory}/{filename}"):
        return {"error":{"message":f"{filename} already exists"}}

    try:
        file.save(os.path.join(files_directory, filename))
    except Exception as exception:
        return {"error":{"message":f"got an exception when attempting to upload {filename}"}}
    else:
        return {"url":"https://www.freekb.net/images/cognito1.png"}

 

In this example I used Python os.path.exists to determine if the image already exists and if so I return {"error":{"message":f"{filename} already exists"}} which displays as a notification alert pop-up in web browsers.




Did you find this article helpful?

If so, consider buying me a coffee over at Buy Me A Coffee



Comments


Add a Comment


Please enter 4feaf3 in the box below so that we can be sure you are a human.