Search code examples
ckeditorckeditor5

Remove option to upload image in CKEDITOR 5 with ImageInsert


I am using CKEditor 5 and I need to prevent user to upload image to my server. I know it can be easily done by removing the corresponding module Image.

Here the catch, ImageInsert module looks good and I would like to use it for its ability to add image by URL. The problem is that ImageInsert button has an upload option by default. Is there any way to remove that option but keep the insert image by URL option?

Insert image from URL


Solution

  • This is not possible unless you modify insert image plugin UI and custom build ckeditor5 by yourself.


    There is a dirty fix (but not recommended)

       ClassicEditor.create( document.querySelector( '#ckeditor' ))
        .then( editor => {
                window.editor = editor;
    
                const imageBtn = document.querySelector('.ck-file-dialog-button');
                if(!imageBtn) return;
                let imageIcon   = imageBtn.querySelector('svg.ck-icon');
                imageIcon.style.width = 'var(--ck-icon-size)';
                const dropdownBtn = document.querySelector('button.ck-splitbutton__arrow');
                let downAngleIcon = dropdownBtn.querySelector('svg.ck-icon');
                imageBtn.style.display = 'none';
                downAngleIcon.remove() 
                dropdownBtn.prepend(imageIcon);
    
        })
    

    enter image description here