CODEWITHSUNDEEP
javascriptckeditor
user2270134
user2270134

Reputation: 99

CKEditor - disable image drag and drop

Problem: When drag and drop images in Firefox into the CKEditor Window, the image are automaticly encoded in base64.

Now i want to disable this. I tried it with: 

config.removePlugins = 'dragdrop';

but it's not working at all. Also tried it with a old Plugin (imagepaste), but not working either...

Is there a known solution out there? Thx!

Upvotes: 6

Views: 4938

Answers (3)

Juan Cabello
Juan Cabello

Reputation: 751

I am using a ckeditor5 custom build which includes the Base64UploadAdapter plugin. So, to disable this plugin for some particular views, I just added the "removePlugins" instruction to the editor configuration. Then, dragging and dropping images gets disabled.

  configEditor = {
    removePlugins: [ 'Base64UploadAdapter' ],
    toolbar: ['heading', '|', 'bold', 'bulletedList', 'numberedList'],
  };

Upvotes: 2

Roger Russel
Roger Russel

Reputation: 759

At first I tried to disable Base64 with config.removePlugins = 'dragdrop,basket';, but it didn't work at all.

Then I found this link, which helped me to solve this problem and wrote a plugin to do the job. Here it is with instructions:

To use it you have to create a folder inside of ./plugins named dropoff. Then create a file named plugin.js with this content:

CKEDITOR.plugins.add('dropoff', {
     init: function (editor) {

          function rejectDrop(event) {
              event.data.preventDefault(true);
          };

          editor.on('contentDom', function() {
            editor.document.on('drop',rejectDrop);
          });

      }
});

After that, you have to register it on CKEditor's config.js.

config.extraPlugins = 'dropoff';

If you already using an extra plugin just put a , between them like this:

config.extraPlugins = 'mypreviousplugin,dropoff';

And be Happy! \o/

Upvotes: 4

Avinash Thadavarthi
Avinash Thadavarthi

Reputation: 31

Here i found the solution to disable the drag and drop in ckeditor

ed.on('instanceReady', (ev) =>{
      CKEDITOR.plugins.clipboard.preventDefaultDropOnElement(ev.editor.document);
});

Upvotes: 2

Related Questions