Altering CKEditor Version 4 to include Upload Image

The library for CKEDITOR in flask is only updated to version 4. Which i believe is fine for my purposes.

The desired result is to add the image2 option to the CKEDITOR. Below is my current Javascript but i am not seeing the desired result.

<div class="mb-3">
<label for="content" class="form-label">Content</label>
{{ form.content(class="form-control", id="content") }}
</div>

<script>
CKEDITOR.replace('editor', {
    filebrowserImageUploadUrl: '/upload',
    extraPlugins: 'uploadimage,image2',
    removeDialogTabs: 'image:advanced;link:advanced',
    height: 300,  // Adjust the height of the editor
    toolbar: [
        { name: 'document', items: ['Source'] },  // Add source editing
        { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', '-', 'Undo', 'Redo'] },
        { name: 'styles', items: ['Format'] },
        { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline'] },
        { name: 'insert', items: ['Image', 'Table', 'HorizontalRule'] }
    ]
});


// Sync CKEditor content with the hidden textarea before form submission
const form = document.querySelector('form');
form.addEventListener('submit', function () {
    for (const instance in CKEDITOR.instances) {
        CKEDITOR.instances[instance].updateElement();
    }
});

Anticipated comments:

1. label = content but replace = editor.

   a. not sure why but when change the replace = content i do not see the input box at all.

Okay the real trouble with this came down to RTDM, where the documentation say their are 3 different versions of CKEditor and I was using the wrong version. As well, I downloaded CKEditor and put it in the root folder, since this editor is now EOL and the newer version is paid only.

If you end up doing the same, this syntax is the correct version:

<script>
CKEDITOR.replace('content', {
    filebrowserImageUploadUrl: '/upload', // Flask route for image uploads
    filebrowserUploadMethod: 'form',
    removeDialogTabs: 'image:advanced;link:advanced', // Simplify dialog
});

// Ensure CKEditor content is submitted with the form
document.querySelector('form').addEventListener('submit', function () {
    for (const instance in CKEDITOR.instances) {
        CKEDITOR.instances[instance].updateElement();
    }
});
</script>