This sample shows the usage of the SimpleUpload plugin.
Depending on the browser that you're using you will have different options to upload files and images. This is due to the different capabilities of each browser.
The plugin requires the usage of a modern browser, so if you want these features for IE8 or IE9 you're out of luck. They are too outdated and lacks the required APIs.
With Chrome, Firefox and IE11 or Edge, you can copy an image or part of it to your clipboard in a program like Photoshop, Paint.Net, etc... and then paste it into the contents with Ctrl+V.
With Firefox, you can select a file in your desktop, copy it to the clipboard (Ctrl+C) and then paste it into the editor with Ctrl+V.
The CKEditor dialogs that include "Upload" buttons (Link and Image for example, but also any other custom one) are automatically modified to provide the same upload features (check extension, file size...) and upload progress. Also you can drop the files into the dialog.
The full plugin is available only for licensed customers as explained in my blog.
Additional samples:
Several ways to validate uploads: basic rules, no check on client side, by size, allow only png images, and even by file name
Filter uploads by extensions
Adding extra fields as GET or POST parameters to the uploads
Different approaches to resize big images: allow, reject, resize on the server, resize on the browser
These inline editors use the default settings defined in config.js You can shrink the page and the columns will resize, and the images are responsive thanks to this little CSS:
/* responsive images for inline demo */
img, svg, .SimpleUploadsTmpWrapper {
height: auto;
max-width: 100%;
}
So, in order to get responsive images while they are being uploaded, you just need to add "svg, .SimpleUploadsTmpWrapper" to your responsive rules
Click here and the toolbar will appear. SimpleUploads works nicely with Classic editors, inline editors, and even with the weird combinations of divareas and anything that you can create with CKEditor.
It also works with either the classic Image plugin or the "Enhanced Image" version
Play around with these basic demos
Paste an image, drop files, use the upload buttons, ...
Open also your normal version of CKEditor and check the differences when you're trying to upload things
End of the samples in this page. Check the linked pages for more usages