Paid Mod CKEditor Drag and Drop Image Upload

[glennrocksvb]

This vBulletin 5 plugin allows drag and drop image upload into the editor making it super easy and convenient for users to attach and share their pictures.

Due to the way vBulletin makes it hard to extend the functionality of CKEditor, a third-party rich text editor used in vBulletin, this mod has no choice but to require editing existing CKEditor-related JS and PHP files. This means that you have to reapply the changes every time you upgrade vBulletin 5. (I created a JIRA in Sep 2016 to make CKEditor configurable. Please vote for it here.)

Additional changes needed but not included in the documentation:

This mod introduced an issue in the editor where the Underline button U went missing. To fix this issue, you have to edit the /js/ckeditor/config.js file on your server using FTP or cPanel (or its equivalent).

Find the following line:

config.removeButtons = 'Underline,Subscript,Superscript';

and then remove Underline, (include the trailing comma)

config.removeButtons = 'Subscript,Superscript';

You will have to clear your browser cache for it to get the latest version of config.js. If you are using CDN or CloudFlare, you would have to also purge the cache on their server.

Thanks to William for reporting this issue!

NOTE: (Updated on Mar. 3, 2022)
This plugin is temporarily unavailable for purchase due to conflict to the existing drag and drop upload which was added in vB 5.5.6. Although drag and drop upload is now supported by default, it still lacks support for pasting images for upload at the time of this writing. The attachment drop zone is also limited to the attachment panel section only. It does not allow dropping images into the editor box itself. These limitations are supported in this mod. This mod is mostly working at the moment and it's installed here for testing. Please click the arrow icon in the quoted post below to see more details on what is working and what is not.

Updated on Jan 24, 2023: Pasting images has been added natively to vB5 in the past few releases. Thus, this mod will no longer be available for purchase.

This mod is now mostly working...

Watch the video screencast demo on YouTube.

[glennrocksvb]

Unfortunately, this mod requires editing existing ckeditor JS files as vB didn't make it developer-friendly to easily add ckeditor plugins without hacking the JS. This means, you have to edit the JS files every time you upgrade. I'm thinking of making something that would easily update the files without manually editing them by hand.

[hanm13]

Any update ?

[glennrocksvb]

I will release it soon. No specific date though.

[hanm13]

I will release it soon. No specific date though.

What about now ?

[glennrocksvb]

Sorry not yet. I will prioritize to have it this week. Apologies for the delay.

[glennrocksvb]

FYI. I have installed this drag and drop image upload mod on this site. Please try and let me know if it works for you or not. If not, please provide steps to reproduce and the error message (if any) and the browser used. Once it's fully tested and working, then I will release the mod to the public.

Below is a test drag and drop upload...

[shining]

hm... doesn´t work here (using chrome)

[glennrocksvb]

Try clearing the browser cache

[shining]

ah... now it works

[willie53]

lets see this

looks like it worked here
using firefox

[willie53]

now lets try Microsoft edge

yep works
def something I would buy

[glennrocksvb]

Thanks guys for testing and confirming it works. Will release it soon!

[Mark.B]

[Mark.B]

Yep the above shows that you can even drag images displayed on a webpage.

[glennrocksvb]

Yep the above shows that you can even drag images displayed on a webpage.

That works even without this mod. Try it in vbulletin.com. It basically does "embed" (using [img] bbcode) and not "upload" the images.

[Mark.B]

That works even without this mod. Try it in vbulletin.com. It basically does "embed" (using [img] bbcode) and not "upload" the images.

Oh I keep forgetting about that. I hate WYSIWYGs and always use 'standard' editors which makes you forget what WYSIWYGs can do.

Let me try an actual attachment then.