Image uploading in Flask blog with CKeditor 5

Question

I'm stuck with following problem while creating my Flask based blog.

Firstly, I used CKeditor 4 but than upgraded to 5 version.

I can't understand how to handle image upload on server side now, with adapters etc. As for 4 version, I used flask-ckeditor extension and Flask documentation to handle image uploading.

I didn't find any examples for this combination. I understand that I lack knowledge and I'm looking for advice in which direction may I advance and which concepts should I know to approach such subject.

Thanks in advance.

My takes on this so far:

According to https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/simple-upload-adapter.html (official guide on simplest adapters). config.simpleUpload.uploadUrl should be like /upload route that was used in cke4. Object with URL property needed by cke5 is cke4's upload_successful which was returned by /upload route.

Answer 1

So I figured it out.

As for cke 4: /upload route handled uploading process by returning upload_successful() from flask-ckeditor extension. upload_successful() itself is a jsonify-ing function, which in turn modify arguments to fit json format.

As for cke 5: There were some things aside upload handling, which caused problems.

1. Plugin used: "Simple upload adapter"

   • I integrated cke5 by downloading from Online-builder and then reinstalling and rebuilding it by myself. (for this on Ubuntu 20.04 I installed nodejs and npm by sudo apt install .) Plugin is installed by executing from /static/ckeditor folder:

     npm install

     npm install --save @ckeditor/ckeditor5-upload

     npm run build (need to wait here for a little)

   • Different adapters may conflict and not allow Editor to load, so I removed CKFinder adapter from src/ckeditor.js in import and .builtinPlugins sections, replacing them by import SimpleUploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter.js'; and SimpleUploadAdapter correspondingly.

2. .html , where CKEditor instance is created. body here is name of flask_wtf text-field:

    <script> ClassicEditor.create( document.querySelector( '#body' ), { extraPlugins: ['SimpleUploadAdapter'], simpleUpload: { uploadUrl: '/upload', }, mediaEmbed: {previewsInData: true} } ).catch( error => { console.error( error.stack ); } ); </script>

3. Things to notice:

   • In official guide plugins are recommended to enable as following:

 .create( document.querySelector( '#editor' ), { plugins: [ Essentials, Paragraph, Bold, Italic, Alignment ],

• For me it is not working: Editor would not load with such syntaxis. What worked is this (from docs ):

 .create( document.querySelector( '#body' ), { extraPlugins: ['SimpleUploadAdapter'],

So, plugins -> extraPlugins and PluginName -> 'PluginName' .

4. /upload route itself:

 @main.route('/files/<path:filename>') def uploaded_files(filename): app = current_app._get_current_object() path = app.config['UPLOADED_PATH'] return send_from_directory(path, filename) @main.route('/upload', methods=['POST']) def upload(): app = current_app._get_current_object() f = request.files.get('upload') # Add more validations here extension = f.filename.split('.')[-1].lower() if extension not in ['jpg', 'gif', 'png', 'jpeg']: return upload_fail(message='Image only.') f.save(os.path.join(app,config['UPLOADED_PATH']. f.filename)) url = url_for('main,uploaded_files'. filename=f.filename) return jsonify(url=url)

I will edit this answer as I advance in this subject.