SimpleUploads is a plugin for CKEditor aimed at simplifying the task of uploading files from the local computer to the web server where CKEditor is being used. It tries to fulfill missing features in the QuickUpload system provided by CKEditor, as long as the browser allows it.Previously it was know as ImagePaste, but since version 4, I've renamed it in order to express that the plugin allows far more than just pasting images in CKEditor.
Features
There is a wide number of enhancements performed, some might be subtle and useful for the developer, others are focused on the end user.For the user
- Allows pasting an image directly into the document
- Allows drag&drop from the computer to the document
- Provides toolbar buttons to upload files and images with the minimum number of steps.
- Enhance the dialogs with drag&drop uploads
- Replace the QuickUpload option in the dialogs, now it only requires to select a file without any extra step
- Show upload progress and cancel, as well as preview of images or file size for documents
- Event to validate a file before the upload starts
- Easy configuration options to restrict allowed extensions and maximum file size
- Post-upload event to modify the element after it has been added to the editor
- Enable Cross Domain uploads with CORS.
- Include additional form data in the upload (for Anti-CSRF checks or to send custom field that you've added in a dialog)
An example of what can be done thanks to the plugin is the ImageCrop plugin that takes the images as they are being added to the editor and directly allows to resize them before uploading them to the server (although it also uses this API to edit existing images and add them again to the server)
Browser support
The supported browsers are Chrome, Edge, Firefox and Internet Explorer. Safari is not officially supported because I would need to buy a new computer just to test it, that seems an expensive test for me. So some features might work and some not, as long as they follow the Chrome behavior then it should work.All the common features will work with Chrome and Edge. Firefox is the only one that adds the ability to paste a file or image into the document by selecting it in your desktop.
IE has different features according to its version, you should move to IE11 for full support:
- IE8, IE9: Not supported as they lack FormData.
- IE10: The upload preview, progress and drag and drop work, but it doesn't allow pasting images.
- IE11: Surprisingly this version of IE surpasses the features of Chrome and Firefox because it allows pasting a document from MS Word 2013 (I still haven't found other valid data sources) with all its images at the same time. Unfortunately, it seems that this feature no longer works under Windows 10.
Requirements
The plugin works with CKEditor 4.x, the only requirement is that you have already configured CKEditor to allow file uploads. You can use CKFinder or any other upload system that uses the CKEditor API, even create your own one. I provide a sample basic script for those that need all the details, but it's not advised to use it in production.There is no restriction on the server, as long as you are able to install a CKEditor plugin and you have configured the QuickUploads in CKEditor, you're ready to go. Please, follow this guide to learn how to configure File uploads in CKEditor, this is your only real requirement.
If you're using CKEditor in Drupal, please read this guide with detailed instructions and a specific uploader module. But please, don't buy this plugin until the quick uploads in CKEditor are working correctly. (Of course this last sentence applies to whatever CMS you're using)
Support
The plugin is available only to licensed customers, if you manage to find a bug then send me a mail so I can look at it. My policy is to keep my plugins bug-free, because that's the way to have the lower number of mails in my inbox.The payment is a one-time-fee, after the payment you will get the download and your mail will be added to my list for future updates. All future updates are included, even if the plugin keeps growing and including whole new features as it has done all these years since I started developing it.
Demo
You can check all the features in this page, including some zones in "inline editing"Getting the plugin
You can get it under the same terms that my other plugins: the license for a single site is 10 euros and the OEM license for any site that you create is 50 euros. If your company sells a product instead of building websites, then you can use the Enterprise license at 120 euros.| Single site license | OEM License | Enterprise license | ||
|---|---|---|---|---|
| Price: 10 euros | Price: 50 euros | Price: 120 euros | ||
| For use in a single domain | For companies that want to use the plugin in several domains created by them. | This license allows to integrate the plugin in your product that you sell | ||
 |
|
|
297 comments:
1 – 200 of 297 Newer› Newest»Hey I just purchased the full version of this plugin and it works well but is removing other plugins.
Dialogs added later on the page and custom buttons are also disappearing. Is this know behavior?
That shouldn't happen.
The integration with the dialogs should change only the quick file upload with the simple upload button and enable drag & drop on the dialogs, but the dialog and other buttons should remain the same.
And you can even set config.simpleuploads_respectDialogUploads=true; to disable the changes to the upload buttons.
Maybe there's some other unexpected conflict with your plugins, so it would be great if you could mail me a URL to test your setup or send me a copy of your config file as well as least one of those customizations so I can look at the problem.
Hi Alfonso,
I purchased the full version of simpleupload plugin. I have integrated it with my CKEditor. I am trying out Plug in in IE 10 & 11 where I am not able to drag & drop images or even copy/paste images from mspaint.
However I can see Chrome and FF works well.
Please let me know what could be the reasons for IE 10 & IE 11 failing.
Here is my environment details :
1) CKeditor used with Extjs & with Spring MVC - JAVA.
2) Using servlet to upload image to temp location.
- In IE 10 & 11 , If I select image from "Add Image" button then it uploads image to temp location. but it doesn't show me any preview. Where Drag and Drop , Copy/Paste doesnt work at all. Not able to paste image from Ctrl + V.
3) I am using CkEditor latest 4.1.x version.
Hi Swapnil
The first version of CKEditor that supports IE 11 is 4.3 so if you're using 4.1.x then your page is somehow forcing IE to use an old compatibility mode:
It might be the lack of a doctype, a meta tag forcing a specific rendering mode or even the inclusion of the domain/intranet in the compatibility list.
Everything that you describe matches that theory and that's why you can't use drag&drop or paste with IE11.
So you should find out why your page is in compatibility mode and allow IE to use its latest rendering mode.
can this plugin run on PHP4?
The plugin itself is only javascript, you need to install a script in your server. In fact, you must install that script before trying to use this plugin and the normal quick uploads should work.
You can find a set of sample scripts for several languages at this repository: https://github.com/AlfonsoML/CKEditorUploader
As you can see, the PHP sample is very simple and you should be able to make it run in your server even if you're still forced to use PHP4.
Hi Alfonso,
I tried the public version with ff 26.0 and CKEditor 4.3.2.
I found that all works fine except the last step.
When on xhr.onload script tries to get image
var theImage = editor.document.getById( id );
it receives null inside 'theImage' var and therefore can't update image.
id var is smth like 'cke_12' when this happens.
Can you advice me smth on this?
Thank you.
The first thing that comes to my mind is that you have removed the normal image button and the ACF is filtering out the inserted image.
The full plugin takes care of adjusting the ACF, but the basic one is supposed to be used together with the normal image button (remember that it's an enhancement, not a full replacement).
Anyway I'll try to check if they have changed anything else that is causing a problem with those versions, which configuration did you use in the CKBuilder setup?
>> The first thing that comes to my mind is that you have removed the normal image button
Probably that's the reason. Please do not worry till tomorrow when I will check this. I will reply.
Thank you for the fast answer.
Yes, that was absent image button and therefore ACF filtering.
Thank you, going to use full version.
I was using ImagePaste, which seemed to be working just fine - but then suddenly stopped.
I am using the ASP.Net version of CKFinder
I have purchased the license for simple uploads but am getting the following error whenever I try to upload a file (not just by pasting)
Error posting the file to
/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images&CKEditor1&CKEditorFincNum=2&langCode=en-gb
Invalid data returned (check console)
The file is actually arriving on the server in UserFiles but is not rendered in the WYSIWYG panel (and is not saved)
In the browser console I'm dumping in that case the response sent by the server (you can use also the network tab or even Fiddler to check it).
It should help you to find out what's the problem, maybe there's some change in the server settings and now it returns an internal error, or there's some module that modifies the data and breaks it in some way.
Without seeing the response I can only keep guessing problems. If you need further help, send me a mail with the contents of the response, a screenshot of it or an URL to test.
@Mark Dale - I had the same issue. The script is expecting the value returned from the server to look a certain way.
I fixed the error by outputting this from the server:
Response.Write("<"+"script>/(2,'" + FileName + "');<"+"/script>/\n")
@Alfonso Martínez de Lizarrondo - Great plugin, thanks! I think I've found a small bug with the script, that didn't exist in imagepaste. When you paste an image into FireFox from Windows Explorer (using Ctrl-V), the plugin ignores the position of the cursor and places the image at the bottom of the editor.
@Jørgen von Tangen
Thanks for the comments. There's a little bug in the current version that is too strict with the expected response. I want to finish some changes asap and update that version. If anyone finds this kind of problem just send me a mail and I'll provide a beta version that fixes the problem (at least it worked for Mark)
And I'll add that bug with Firefox to my pending tasks, I didn't notice it before. Let's hope that it's easy to fix.
Is there a way to implement this through Amazon S3? My CKEditor sits on S3 and I'd like to use it to house the uploaded files as well.
I have no idea about how S3 works, but the main point is that this plugin is only client-side. As long as you use an uploader that implements the CKEditor API for quickUploads you can use it.
You can find sample scripts for PHP, C#, vb.net and classic Asp at https://github.com/AlfonsoML/CKEditorUploader and as you can see the only requirement is to receive the posted file and send back a little string with the correct format as the response. If you implement such uploader for your CKEditor, the upload tabs in the image and link dialogs will work and when you add this plugin you will get all the extra features.
Just a note: I added an event that helped make the upload look smoother if you resize images.
On line 1696 I added:
editor.fire('simpleuploads.imageDropped', { element: img });
This way you have an event so the image isn't huge in the editor when you drag it over or if you size images down on your server.
If you just want to limit the maximum size that it's used to show the preview, you can add instead a css rule like this to your page (of course, with the proper scope)
/* responsive images for inline demo */
img, svg, .SimpleUploadsTmpWrapper {
height: auto;
max-width: 100%;
}
Instead of 100% use whatever you want and the preview will scale that way.
In this case, that rule is used in the inline editors at http://www.martinezdelizarrondo.com/ckplugins/simpleuploads.demo4/
Try to upload a huge image to the columns at the bottom and while it's being uploaded resize the page and you'll see that the preview scales automatically.
The next version of the plugin will allow to check the image dimensions before the upload starts and it might include also the option to scale the image on the client so that uploads of huge images is faster.
Hi,
I just have a quick question regarding the integration. Am I correct that the full version of this plugin can replace the normal image uploading plugin?
@Richi:
not exactly.
There's no "image upload plugin" there's a plugin (in fact currently there are 2 plugins) to edit image properties and insert images into the content and one to edit links.
My plugin only allows to insert images or links to documents into the content, any editing (changing attributes like alt, dimensions, etc...) must be done with the normal plugin.
My plugin also improves the upload in the normal dialogs so you can drop files there or do it in a single click, and there's a progress bar while the file is being uploaded, but the rest of the dialog remains the same.
So probably you still want to keep that normal image plugin around.
Hi
Purchased single domain licence, though it seems incompatible with redmine's ckeditor plugin.
Any clue what could be the issue ? Anything I could pass along to redmine_ckeditor dev?
https://github.com/a-ono/redmine_ckeditor & https://github.com/a-ono/redmine_ckeditor/issues/109
Hi Sacha
I don't know how that distribution of CKEditor works, but did you check that the upload tabs are enabled and working and did you test the free "imagepaste" plugin before buying the full version?
Do you get any error?
Can you check if the plugin is correctly loaded in your setup?
Hi.
1) Do you obfuscate your plugin or it's available in sources?
2) If I purchase enterprise version will I be able to modify it and use in my CMS?
P.S. Here're some missing and fixed translations for russian in your demo setup:
invalidExtension: Недопустимый тип файла, выберите файл с допустимым расширением.,
nonAcceptedExtension: "Недопустимый тип файла, выберите файл с допустимым расширением:\r\n%0
nonImageExtension: Пожалуйста, выберите изображение
imageTooWide: Изображение слишком широкое
imageTooTall: Изображение слишком высокое
The plugin is distributed with the plain javascript without any obfuscation or compression. I've done that only on the demo (I guess that you can understand why).
If you have to change something, go ahead, but it can be better if you explain me your needs and I can add that as an option in the default options so in any future updates you don't need to remember how to apply your patches.
And thanks for those translations, I prefer to avoid using automatic translators because the results are usually horrible for this kind of situations, so I rely on the feedback from people like you :-)
error in console.log:
The editor is missing the 'config.filebrowserUploadUrl' entry to know the url that will handle uploaded files.
It should handle the posted file as shown in Example 3: http://docs.cksource.com/CKEditor_3.x/Developers_Guide/File_Browser_%28Uploader%29/Custom_File_Browser#Example_3
More info: http://alfonsoml.blogspot.com/2009/12/using-your-own-uploader-in-ckeditor.html plugin.js?t=E0LB:446
The 'SimpleUploads' plugin now is disabled.
=> Don't known (yet) what the filebrowserUploadUrl path is.
In those links you can read how to add an upload script to handle the files that the user wants to send to your server.
In your setup that configuration entry is missing, so you must adapt your uploader or add a new one that can handle the posted files. Please read those links because they contain all the information that you need.
I just puchased the plugin and I am trying to configure. I have a java/maven project and ckeditor from primefaces extension. I don't have config.js file. How to configure it? Where can I put this config.extraPlugins='simpleuploads'?
Hi Rayfran
I haven't used PrimeFaces so I don't know anything about how CKEditor is used there. Searching around someone is asking your same question here http://stackoverflow.com/questions/20890727/adding-a-custom-plugin-to-the-primefaces-extensions-ckeditor but it hasn't got any answer so far.
According to this answer it seems that you can add the plugin to the jar http://forum.primefaces.org/viewtopic.php?f=14&t=25689
Check also this topic: http://forum.primefaces.org/viewtopic.php?f=14&t=31915
Hi, I'm tryomg to use your http://ckeditor.com/addon/imagepaste plugin with drupal/ckeditor...but where do I have to configure the 'filebrowserImageUploadUrl ' also in the ckeditor config.js? I'm using the IMCE for File Management in Drupal... so I don't have to install an additional upload-Script?
In the requirements section I already try to explain that IMCE doesn't really integrate with the upload system of CKEditor but that it uses its own one instead, so you can't use it with my plugins.
Maybe there's a way to change that, but so far no one has reported to me that they have found such magic configuration.
You should search for help in the drupal fórums where they should know how IMCE works.
Hi, I tried CKEditor + FCFinder with ImagePaste. The uploads worked fine. Than I upgraded to SimpleUploads and now I get an Error message.
Error posting the file to /../kcfinder/upload.php?opener=ckeditor&type=images&CKEditor=toolbar&CKEditorFuncNum=2&langCode=de - Invalid data returned (check console)
Do I need a different upload.php script now?
No, the same upload script should work fine.
Please look at the console and send me a mail with the text that it's returned by the server.
This plugin tries to handle more cases than the imagepaste plugin and so it has changed the way that the returned data is processed and I might have made (yet another) mistake.
I'll try to fix it as soon as I get your message back.
Hi..
I purchased this plugin.. if there is any upgrade.. how can i download it?
Whenever I release a new version you'll get a mail with the changelog and the download link :-)
Hi Alfonso,
Is there a simple way to not upload the file but use a data uri then on subsequent edits it would show as an uploaded image?
I don't want to have temporary files floating around if the user's submission (after submitting the form) didn't succeed.
Hello,
I just purchased simpleuploads plugin for single domain. i have add custom file manager i can upload files using image button in CK editor. i try to drag and drop files but its not working. can you suggest me any solutions for this. or if you have any demo that i can download for my project.
my testing environments:
CK Editor 4.x.x
Php 5.4.x
Apache 2.x.x
Thanks
Hi,
I use simpleuploads plugin and it works great.
But is it possible to change the "img" tag inserted with "a img /a" ?
Thanks
@Joshua:
No, there is no simple way. Control of orphan files is clearly important, but it's not limited to the files uploaded and never used, the same problem happens when they first upload a file and then edit that article and remove that reference or change to a new one, as well as when the article itself is deleted.
A partial solution for your problem would be to upload the files to a "staging" folder, and when the article is saved move the files to the correct folder and update the content to use the final path.
This can take more or less the same work that your suggestion (I mean: you have to parse the html in both cases to find the uploaded files, save them to the correct location and update the html), but with the advantage that it should be lighter to handle: a base64 encoded image be quite big, that means that the processing in CKEditor can be a little more risky (I know that there's a bug open because such images can't be edited), and everything is posted at once to the server, so there are higher chances of timeouts, size limits, etc...
@milon
When you say that you can upload images, are you uploading using the "Upload" tab in the image dialog, or that you use the "Browse server" button and you can upload in the window that opens there?
Did you test the ImagePaste plugin as I've suggested so many times?
Do you get any error in the browser console?
@Unknown:
You can use the "simpleuploads.finishedUpload" event to get a reference to the created element and wrap it in a link or whatever that you might need.
Actually I use this :
CKEDITOR.on('instanceReady', function(e)
{
e.editor.on( 'simpleuploads.finishedUpload' , function(ev)
{
if (ev.data.element.getName() == 'img')
{
var imageSrcUrl = ev.data.element.$.src;
var width = ev.data.element.$.width;
var height = ev.data.element.$.height;
var imgHtml = CKEDITOR.dom.element.createFromHtml('');
e.editor.insertElement(imgHtml);
}
});
});
But it duplicates the freshly added element instead of replace it.
A blog comment is a bad place to write code, so just in case it gets broken here's a sample in pastebin: http://pastebin.com/iVZFa5HS
Instead of creating a new element and calling insert, you can use some simple DOM methods to create a link, replace the img element and put it inside the link:
var img = element.$,
doc = img.ownerDocument,
link = doc.createElement('a');
link.setAttribute('href', img.src);
link.setAttribute('data-cke-href', img.src);
img.parentNode.replaceChild(link, img);
link.appendChild(img);
It works, thanks a lot
Hi, I would like to purchase the single site license but I plan to change the website's domain name in the future. Will the plugin still work on the new domain?
Hi John,
Yes, as long as you use it only on one domain at a time (besides whatever development servers you need), you can change it at any time.
Thanks Alfonso, that is great news. Another question: Am I supposed to have a CKFinder licence to use your plugin or it will work just with CKEditor?
You don't need CKFinder, but any script that supports the CKEditor API to handle uploaded files: http://alfonsoml.blogspot.com.es/2009/12/using-your-own-uploader-in-ckeditor.html
Here's a small set of samples in different languages: https://github.com/AlfonsoML/CKEditorUploader
Please, remember that before purchasing this plugin you must have configured correctly the basic upload features of CKEditor or my plugin won't work. You can use any solution that you prefer, but this is already explained at the top of this page.
When user inserts the file upload into CKEditor, the link is created properly. Now is there a way how to test the link click directly in CKEditor? Link is not clickable as is, isn't there any trick how to do it?
No, previous versions of CKEditor used to provide a way to test links (I think that an entry in the context menu and/or using Ctrl+Click) but this is one of the features that they removed and it's not clear if they want to add it back. Your best chance is to create a ticket at their dev site or better, get someone at drupal or ibm request that.
Hi,
I have purchased single domain version. Kindly let me know how to set the destination folder for image and file upload. Can we set different folders for each.
Thanks
Hi ub13group
You can use the filebrowserImageUploadUrl and filebrowserUploadUrl to pass different parameters to your upload script and that way you can save the file or image in the correct location
Hi
I have downloaded ckeditor ckeditor_4.4.1, kindly let me know how to incorporate your plugin, as i tried it as your instruction but not able to view it.
Regards
You have downloaded now CKEditor?
Didn't you have CKEditor already installed and configured?
I repeat over and over again that before purchasing the plugin you must have CKEditor already configured and basic file uploads working I provide full sample scripts at http://alfonsoml.blogspot.com.es/2013/08/a-basic-upload-script-for-ckeditor.html
This is linked in this post, in the documentation, ...
Please, take the time and read the docs if you want to get everything to work:
http://docs.ckeditor.com/#!/guide/dev_installation
http://docs.ckeditor.com/#!/guide/dev_howtos_basic_configuration
http://docs.ckeditor.com/#!/guide/dev_file_browse_upload
and of course this page and the included install.html in the plugin.
Hi Alfonso,
CKEditor and KCFinder work wel together. Adding SimpleUploader plugin throws error:
Error posting the file to /kcfinder/upload.php?opener=ckeditor&type=images&CKEditor=editor&CKEditorFuncNum=2&langCode=en
Invalid data returned (check console)
The console says:
var par = window.parent,
op = window.opener,
o = (par && par.CKEDITOR) ? par : ((op && op.CKEDITOR) ? op : false);
if (o !== false) {
if (op) window.close();
o.CKEDITOR.tools.callFunction(2, '/pictures/images/02.jpg', '');
} else {
alert('');
if (op) window.close();
}
Can you please help?
Hi Harald
The javascript sent by KCFinder is valid but not what I'm expecting so my regexp is failing.
I'll readjust it ASAP and I'll send you a new version to check that it's working fine in your setup.
Regards.
Hi Alfonso,
I had to update KCFinder and now I'm getting Invalid data returned error.
The JS console says:
<html><body><script type='text/javascript'>
var par = window.parent,
op = window.opener,
o = (par && par.CKEDITOR) ? par : ((op && op.CKEDITOR) ? op : false);
if (o !== false) {
if (op) window.close();
o.CKEDITOR.tools.callFunction(2, '/storage/userupload/6/1/images/1654959_645670185491087_927678292_n%2811%29.jpg', '');
} else {
alert('');
if (op) window.close();
}
</script></body></html>
Hi Art
That's the same problem reported by Harald just two days ago.
Now I'm finishing the tests and I will publish a new version to fix the problem for everyone using KCFinder as well as other improvements.
Thanks, the update from yesterday solved the issue.
Can this plugin be used with subdomain aswell?
Annas:
Not only subdomains; if you configure your upload script correctly, you can use it in a cross-domain setup
Hi Alfonso, great plugin!
I have found an issue with adding/uploading images with international characters in the file name (such as a file called æøå.jpg). The file name is converted to unicode charactes (\u00E6\u00F8\u00E5.jpg in the case of æøå.jpg) and then the image upload fails.
Is this a known bug? Do you have a workaround?
Thanks in advance.
Update: I just tested on your demo site and the upload works with my æøå.jpg test image. So apparently it's an issue with how CKEditor is used on the IBM XPages platform. Can you guide me to what part of your code that changes the file name? Thanks!
The problem might be how your uploader script handles utf characters.
Use the browser network tools (or an external tool like Fiddler) to check the data that it's sent to the server, then the response that the server sends back.
I expect that the data sent to the server is correct, and maybe it's saving the correct file (you can check it with your FTP), but when it returns the name of the uploaded file it escapes the utf chars and then things go wrong.
Besides that, obviously you should also check what happens when you upload such a file with the normal "upload" tab in an editor without my plugin enabled, if you get the same incorrect results then it's clear that the problem is just your uploader script.
If that upload works correctly, then please send me a capture of the data sent back from the server so I can try to reproduce the problem
Hi Alfonso, normal upload works as expected. As soon as I enable SimpleUploads it fails.
The following is posted:
Query String Parameters
$$axtarget:view:_id1:_id2:_id14:tabbedPanelv0sq3b9oqvwg:tabPanel1:_id93:rtControlBody
$$viewid:!dtlwpddka5!
command:QuickUpload
type:Images
CKEditor:view:_id1:_id2:_id14:tabbedPanelv0sq3b9oqvwg:tabPanel1:_id93:rtControlBody
CKEditorFuncNum:2
langCode:da
Request Payload
------WebKitFormBoundarywq0WYYc2nyKC8tdb
Content-Disposition: form-data; name="upload"; filename="æøå.jpg"
Content-Type: image/jpeg
------WebKitFormBoundarywq0WYYc2nyKC8tdb--
The response from the post:
script type="text/javascript"
window.parent.CKEDITOR.tools.callFunction(2, "/app.nsf/xsp/.ibmmodres/persistence/DominoDoc-NEW_51-Body/\u00E6\u00F8\u00E5.jpg");
/script
Thanks.
Hi Per
I've been able to reproduce the problem using your response. It's "funny" this javascript escaping stuff
I think that I've managed to create a workaround and now it works fine for me, but I would rather send this version just to you so you can test it and when you confirm that it's fine then I will send the update for everyone else.
If you send me a mail (I can't figure it out here) I'll send you back the new version.
Hi Alfonso,
I purchased Simple uploads plugin for ckeditor version 4.4.2 and using this in JSP page. Actually I purchased this for paste the images from clipboard in chrome and IE browsers. I referred install.html file for configuration and followed 1st and 2nd points in installation steps and done. But images can't paste in chrome and IE browsers. What else we need to add for this plugin?
Hi Vasanth
I'm not sure why I'm replying again, but just in case that you finally want to read something...
I replied to you yesterday, I've replied also at http://ckeditor.com/addon/simpleuploads?page=1#comment-132727
You can read at the top of this page that the requirements to use this plugin is that you have an uploader working, and I provide samples ready to use in four different languages.
In case that you don't want to configure an uploader, then use the new "base64" option and the images will be inserted into the content just like Firefox does, but please, read the posts that I've written because everything is already explained several times.
Hi Alfonso,
great plugin. i have bought a single licence for an intranet tool developed with Drupal.
i'm using CKEditor 4.x and CKFinder. i can upload files via the Browse Server button. i can paste images in the editor (and now with your plugin i can drag'n drop) -- however, files are still base64. am i missing something?
thanks!
Hi George.
You say that you can upload files with the "browse server" button, but my plugin requires that the Upload button is enabled in the image and link dialogs.
CKFinder supports both options, browse server is enabled with the filebrowserBrowseUrl setting in CKEditor and the direct uploads (what my plugin uses) is filebrowserUploadUrl
If this setting is empty, I add a warning in the console, do you get that?
And does this problem happens only with Firefox or with all the browsers?
Do you have any error?
By a chance, I hope that you didn't specifically enabled the "base64" upload that I recently added
Hi Alfonso,
thank you for the quick reply.
i have the 'upload' tab enabled and working on both link and image modals of CKEditor.
i am not getting any errors in the console.
i havent't played with any base64 config, i just placed the simpleuploads folder in the plugin dir of ckeditor, and enabled it via config.js (instead of imagepaste).
apparently i can drag'n drop only in firefox, chrome won't let me (not even in the paste from word modal). i'm not sure if this was an option with the imagepaste plugin.
According to your description that it only "works" in Firefox, I would say that my plugin is not working at all and all that you see is just the default browser behavior.
If you had the imagepaste plugin working, then this one should work just by replacing its name in the extraPlugins setting.
Are you using other additional plugins?
In that case remember that there must be a single entry for extraPlugins with the name of the plugins separated by commas (yes, this is obvious for many people, but for many other the JavaScript is just some weird language)
Can you send me a mail with a URL to your site so I can try to check it?
unfortunately, i don't have a link, since it's an internal intranet tool.
the only extraplugin is config.extaPlugins='simpleuploads';
i have other plugins, like paste from word, but not enabled via the config.js but on the drupal administration interface.
thanks again for your help, i really appreciate it. i believe this is the only thing left that needs to be fixed on my intranet.
Alfonso, i have found the root of the problem. Yes, as expected, it's one of those 'is the PC turned on?' things. i forgot to 'enable' the simpleuploads plugin in the drupal/ckeditor admin interface.
i'm so sorry for all the fuzz -- and again, REALLY appreciate it.
I'm glad that you've found the solution.
Installing CKEditor plugins in Drupal is quite harder than in other systems, and it seems to require specific instructions.
Let's see what happens when they release Drupal 8 with CKEditor built in...
Hi,
After purchase this plugin (single site license), can I run it locally first for testing, etc. Once development and testing is complete, i will move the project to web server for production. Is your license allow for this?
Thank you.
Alfonso, i have one curiosity. is there a chance that upon image upload, to also fill in the link attribute with the file's path? i know one can do that manually, but was wondering if that's something that can be done when the file is uploaded.
Hi tengkubasri
Yes, development machines don't count toward the licensing. You can test and develop using as many computers as you need, as long as you use with the public only with one domain.
Hi again George
In order to give you the exact answer I will need some time to create and test it, but basically you can try to use the 'simpleuploads.finishedUpload' event that I fire. It might be possible also to use a function in the third parameter that your server sends back after an upload.
Hi Alfonso,
I got SimpleUploads working in Drupal with CKEditor module and the trial version of CKFinder.
1) If I set CKEditor to use a different File Browser, like IMCE or elFinder, SimpleUploads copy paste doesn't work and buttons dissapear from the CKEditor toolbar.
As soon as I enable CKFinder to work with CKEditor again, SimpleUploads works and buttons are displayed.
The thing is that we can't afford CKFinder. I also don't know how to create my own file upload script for production sites, plus I would still need some file browser, not only the script.
Is there some free File Browser known to work with SimpleUploads?
2) We have an issue when using Chrome: When pasting images, they are always pasted at the begining of the text, not in the insertion point.
There are two settings related to files in CKEditor.
filebrowserBrowseUrl sets the "File Browser" to use.
filebrowserUploadUrl sets the "quick uploader" to use.
You can use IMCE or elFinder for the file browser, and use a different option for the "quick uploader", as long as the files end up in the same location your users shouldn't notice anything and they will think that it's all part of the same file browser.
I don't know if KCFinder (similar name, but different author) can be used with Drupal, but I think that it provides support for both settings in CKEditor.
And your last option would be to use those filebrowsers and adapt the uploader that I provide as a sample so that it authenticates the user with Drupal and uses the correct folders and permissions.
With regards to your second question, that problem happens only in your pages or are you able to reproduce it with my demo?
Which version of CKEditor are you using?
Are you using inline or framed mode?
Any suggestions so that I can reproduce the bug?
Thanks for your quick reply,
I will try to implement your script for quick uploads.
About pasting, it paste in the right position in both of your demos.
I'm using CKEditor 4.2.2. I can try a different version if you think that might be the problem.
The problem might be due to several different reasons and now the hard part is trying to figure out what's to blame.
Of course it would be great if you can try with the latest version.
And use one of the "standard" setups, without other third party plugins.
Have you noticed if the problem depends on the content of the editor?
Unfortunately, I can't use a version higher than 4.2 because drupal ckeditor module throws an error.
There is an option in ckeditor module configuration called 'Force pasting as plain text', if I enable it, it paste the image correctly in the insertion point. I will keep trying other configurations to see if some filter might be affecting it.
When the setting to force paste as plain text is enabled I use a different method to grab and insert the content, that might help to explain why it's working in that case.
Do you use any other additional plugins in your setup?
I will try to test with 4.2 but at the moment I'm trying to figure out why I don't see the upload preview in Chrome in the demo page but it's working fine in every other site.
Hello!
I just purchased this plugin, but it doesn't works.
There is no icon on frontend toolbar.
I tried to use CKeditor 3.6.3 and 4.4.3 for joomla.
Can you advice me something on this?
Thank you.
Hello Евгений
I don't know if things have changed but in order to install an additional plugin for CKEditor in Joomla you had to edit a file as I mentioned here: http://alfonsoml.blogspot.com.es/2012/12/installing-ckeditor-plugin-inside.html
otherwise the problem could be that although the plugin is being loaded correctly, the quickUpload url hasn't been configured in CKEditor and in that case you should see a warning in the browser console.
If you can send me a mail with a url to test your setup I can try to tell if the plugin is being loaded or not.
Works. Thank you.
Hi,
this plugin works with "Roxy Fileman" uploader?
As far as I can see, Roxy Fileman is a full file manager, but it doesn't implement the "quickupload" option for CKEditor, so you'll still need to add that part besides the filemanager.
I'll try to explain in a different way: Roxy is cool, it does lots of things, you can upload files with it, but CKEditor has a way to do a "quickupload" and Roxy doesn't know anything about it, so my plugin can't work if you only use Roxy, you need to add an option (in Roxy or with a separate script to handle the uploads as it's shown in the sample scripts that you can find linked above)
Can you point me to the text of the Enterprise license?
ok Afonso,
i have installed your "Basic Upload Script":
http://alfonsoml.blogspot.it/2013/08/a-basic-upload-script-for-ckeditor.html
I have enabled the Upload tab in the Image and Link dialogs and all work good but the Free PastImage not work, i paste image in the editor (with Firefox 30.0) and image is saved always on base64 encoded data witn no error script.
copy file to CTRL + V : PNG file work upload but not insert uploaded URL image in the editor
copy file to CTRL + V :jpg, gif not work upload
drag and drop file not work
copy from photoshop (any image type) to CTRL + V : work upload (save to png) but not insert uploaded URL image in the editor
@Prashant
I'll hire a lawyer to get a nice license for you. it might take a while... and the price of the enterprise license will rocket up because I'll have to recover the cost of the lawyer.
@Fabrizio Maturo
The two messages are stating (for me different things)
In the first one the plugin doesn't work at all. That could be due to changing the wrong config.js file, the cache in the browser, etc...
But in the second one it seems that the plugin is active and it's sending the file to your server, but then it doesn't appear in the content. If there's no error my first idea would be that you have removed the default image button and so the ACF isn't allowing to insert images into the content.
It would be better if you could send me a direct message with a url to test your setup because I'm not sure about what's happening to you.
yes the plugin is active.
I not have removed the default image button.
I prepare a test url for you, thanks
I can give you enterprise license text. Will that work for you?
How should i sent that to you?
Prashant:
you can send me your proposal to amla70 at gmail dot com
But I must warn you that recently I've received another proposal for an enterprise license that it was totally outrageous to me. It required me to be available for support even in weekends and holidays as well as a statement to continue the support for quite long after my last update.
If you have any plan like that then you can forget about this plugin. You get the same code as everyone and a single 120 euros payment won't give you any special right over my own time.
Sent the license text. I don't believe the terms that are in there are as harsh as the one you got from someone before. Please do take a look.
Hi Alfonso,
I'm using the upload script for CKEditor from the Github repository. I would like to add another function call to the php output. Is that possible? Can you show me some example?
Cheers
It's not clear to me what do you want to do, but if you want to execute your own javascript after the file has been uploaded, then you can set a listener for the events that I fire like shown in this example: http://alfonsoml.blogspot.com.es/2013/11/simpleuploads-and-new-image2-widget.html
That could work, yes.
Basically what I need is to pass the loaded file path to my function.
Is it possible to get the uploaded file path from the 'simpleuploads.finishedUpload' event?
Also, looking at the plugin code it seems a function can be included in the php output using the $msg variable, but not sure if possible or how to use it.
Hi Alfonso, thanks for your help so far. Here's another issue: I'm in an environment where I am unable to edit config.js directly.
Is it possible to set the filebrowserUploadUrl config option using Javascript?
I have tried the folowing but I can not get it to take effect before simpleuploads starts up so I get the "missing config.filebrowserUploadUrl entry" warning.
CKEDITOR.on( 'instanceReady', function( ev ) {
ev.editor.config.filebrowserUploadUrl = ev.editor.config.someOtherConfigWithCorrectURL;
});
The instanceReady event is fired after the editor has finished all its initialization, so it's too late to skip that check.
You can use instead the instanceCreated event:
CKEDITOR.on("instanceCreated", function( evt ) {
evt.editor.config.filebrowserUploadUrl = ev.editor.config.someOtherConfigWithCorrectURL;
});
If it turns out that in your system the ev.editor.config.someOtherConfigWithCorrectURL isn't initialized at that moment, then you can set filebrowserUploadUrl within the instanceCreated event to just any string and correct it on the instanceReady event
We are planning to purchase your plugin. Just to be sure, the image selected will be upload to the server and stored in it, not in database, are we right? We have to talk with our hosting service cause we guess we should get a folder with the proper rights. We are using apache server, what rights are needed for the storing media folder and where is that configured?
Please, take the time to read again the description of the plugin. This is an enhancement for the uploads in CKEditor. You must have your system working previous to try to use this plugin.
It doesn't matter if you store the files in folders, in a database or wherever you like, you only have to provide an upload script that takes care of saving the files and then return the url to that file. I've provided samples (that are saved as files but as I say you can store them wherever you want) that you can use to integrate the uploads correctly in your system.
Please, don't purchase the plugin until the quick uploads are working or you'll ask why the plugin isn't working (hint: because you didn't configure correctly the uploads)
I was wondering if you can add additional GET data along with the default request.
Thanks.
@Aiden:
Yes, the sample linked above shows how to add both POST and GET variables sent to the server:
http://alfonsoml.blogspot.com.es/2013/11/including-additional-data-with-file-in.html
In your case, listen to the simpleuploads.startUpload event and modify the ev.data.url value
Hi Alfonso, SimpleUploads has been working as expected but now I am getting "undefined is not a function" on the insertPastedFile function with the following line:
if (editor.editable().$.querySelector("#cke_pastebin"))
Any ideas?
I am using CKEditor 3.6.x btw so perhaps the issue is that editable() is an unknown function in 3.6?
Yes, that's a recent change to avoid a problem (I think that it was for Chrome), but .editable() only exists in 4.x
I'll change that line asap and I'll send you the corrected version after testing with 3.6 (I must admit that recently I haven't been testing it)
Hi Alfanso,
I purchased the SimpleUploads plugin yesterday.
For testing purpose I set this on my local system. It is working fine.
but when i uploaded this to my live site it does not work.
Please help
Hi Naresh,
As you're posting it here instead of mailing me I guess that you want public help, so it would be great if you could provide us with the URL to your site so we can check what's the error on your site.
Thanks for reply.
I have added this at admin section.
I will mail you url on your email
Thanks again
I have an issue with simpleupload where I upload an image and it doesn't display in the content area however when i resize it does. Alfonso have you ever came across this issue and if so how'd u get around it.
Also in addition to this, how can I manipulate the return errors so that I can have custom dialogs.
I usually use the ajax jquery on complete and success how do i do it in this case?
Sorry, I don't remember that anyone else had that problem.
You should test with other browsers to check if it can be an issue specific to one browser or it can be reproduced everywhere.
Check also with the developer tools if the image is correctly inserted and what changes on it after you resize the editor.
For the errors, as that's kind of unexpected and they shouldn't happen I didn't bother to provide any event, you'll have to modify the plugin if you want to replace the alert to use custom dialogs.
Alfonso,
I've installed your plugin, but I can't get it to work. My DOM inspector shows me that the script is loaded, but I cannot see the 'addFile' and 'addImage' icons in the toolbar. My config looks like this: http://pastebin.com/Et6L4J7f.
I am probably missing something, but I don't know what it is.
The usage of "delete CKEDITOR.instances..." is always a bad idea, it might leave some garbage behind that can cause unexpected problems.
Besides that, I don't see anything special on a quick look. What's "inno_challenge_challenge_content" I expect it to be a textarea, but as you're using CKEDITOR.disableAutoInline = true; I'm not sure why you're doing that.
Now I've had a little time to test your configuration and the problem is the allowedContent setting.
If it's set to true (to disable ACF) the everything works. It seems also that changing the definition of requiredContent for both buttons from 'a[!href]' to 'a[href]' (similar for img) fixes the problem, so now I would like to understand why it seemed to work previously because I think that someone was already using a very restrictive set of allowedContent (I don't think that I'll ever do that myself).
So you can manually do those changes to the plugin (around lines 885 and 905) for the moment and I'll release a new version when I verify that it really works correctly now as well as another enhancement that another use requested and that I have to test if I've been able to code correctly what he requested.
Thanks. I appreciate the effort!
Looking forward to the plugin update.
Hi Alfonso,
I'm trying to use your public plugin before buying your full version, and I can't get it to work...
I have a very light jQuery configuration for ckeditor :
"
filebrowserUploadUrl: '/upload' + '?Type=File',
filebrowserImageUploadUrl : '/upload' + '?Type=Image',
extraPlugins: 'imagepaste,youtube',
"
My upload script works like a charm in "raw" ckeditor. Your plugin should be loaded because the 'youtube' plugin works. But whenever I try to copy/paste a jpg file from explorer to Firefox (33.0), or drag and drop it, the generated source still gives me a base64 big code.
I tried downloading CKeditor 4.4.5, 4.4.2, 4.3.5, even 3.6.6.2, extract imagepaste to the CKeditor plugin folder, apply my jQuery config, and I always have base64 code, whatever I do. For last CKeditor version, 4.4.5, I even directy integrated imagepaste into ckeditor.js using their CKbuilder. The result is still the same.
Can you please tell me what i'm doing wrong ?
Hi Snake :-D
Have you checked the console (Ctrl+Shift+J) to see if there's any error?
According to your description it should work, but maybe you can find there some unexpected error.
Can you send me a URL to my mail so I can check it myself and try to find out what's wrong?
Hi Alfonso,
I have problem with pastefromword and paste plain text plugin when simpleuploads is enabled.
When I click pastrefromword button or paste plain text, nothing happens. When I disable simpleuploads, pastefromword work ok.
Is it possible to have all these plugins together?
I'm using CKEditor 4.3.2 (revision ba625e6)
Thanks a lot.
V.
I've tested with Firefox, Chrome and IE11 on a current version of CKEditor and all of them worked correctly.
Which browser are you testing?
Can you test with an updated version of CKEditor?
Hi,
I was upgraded to version 4.4.5 and problem still occures in last Firefox and Chrome. When i click on Paste from Word button, nothing happens.
Here is my config if can help.
CKEDITOR.editorConfig = function( config )
{
config.filebrowserBrowseUrl = '/admin/index.php?mode=filemanager&start=1&managertype=';
config.filebrowserUploadUrl = '/admin/index.php?modul=processdata&processdata_modul=spravce_souboru&save_form=editor_upload';
config.filebrowserImageBrowseUrl = '/admin/index.php?mode=filemanager&start=1&managertype=img';
config.filebrowserImageUploadUrl = '/admin/index.php?modul=processdata&processdata_modul=fotogalerie&save_form=editor_upload';
config.stylesSet = 'custom:/css/wysiwyg.js';
config.contentsCss = '/css/wysiwyg.css' ;
config.skin = 'moonocolor';
config.removePlugins = 'forms,save,pagebreak';
config.entities = false;
config.autoParagraph = false;
config.extraPlugins = 'nbsp,templates,simpleuploads';
config.templates_files = [ '/admin/ckeditor/templates.php' ];
config.templates='default';
config.allowedContent = true;
};
I've tried downloading a standard build of CKEditor so everything has the default settings, added the moonocolor skin, and the three plugins, then applied your configuration and those buttons are working fine.
As a general rule, it's much faster to provide me a URL to test instead because I've spent almost half an hour doing local tests and then trying to recreate your setup and it turns out that everything works.
HI
Recently i bought simpleuploads plugin. I tried to install in my php application, but in "insert" menu, when I click over "image", i can see "upload" section.
I install it like you said in docs.
Can you help me
Hi,
here is url of testing page
http://vyvoj.ekdesign.cz/admin/ckeditor.html
Thank you for help.
V.
Hi Václav
You're using a version of SimpleUploads quite old (4.1.4)
The latest one is 4.3.6 that I've sent recently to the emails registered when purchasing the plugin.
Please, test again with the latest version as this might be a bug fixed in 4.2.0: "Fixed bug with the paste dialog due to recent changes in CKEditor "
Hi Oscar,
I'll reply better to your email because that "insert" menu sounds like something outside of CKEditor.
Hi Alfonso,
Our customer has purchased this plugin along with ImageCrop plugin. As per the license terms can we make few changes in the plugin code. we don't have control over image upload server, we have to pass parameters as expected by the server like file param should be named as "file" not as "upload"?
Thank You
Hi Lakhan
Yes, you can modify my plugin, but it's better to let me know about this kind of requests because I can try to modify the plugin to provide an API or a configuration option so you can easily upgrade in the future without worrying about your previous changes.
In fact, someone else had already asked about this before but I forgot, so I'll try to implement it this weekend and it should be available in the next update as a configuration option.
Hi,
i'm using ckeditor and i'm facing a problem with pasting an image from the clipboard. in firefox it works fine but when it comes to running it on chrome it bugs. Could you please give me a tip to fix this ?
ps : the error occurs in this section of the code : editor2.on('paste' ..
it seems that the event isn't even fired ..
Thanks for ur help.
Hi Romy
I don't think that there's any "editor2" variable in my code.
Are you talking about an issue with my plugin or you just want me to explain how to write your own code like I did?
Hi, bought your plugin and it's works great. Looks amazing! Btw is there a way to limit how many images can be added to a single entry/textarea? I building a travel related blog site and don't want users to be able to add their entire holiday album there :) Maybe restrict images to 5 a post. I can capture the upload and increment those, but I don't know how to capture when a user removes an image (e.g. adds 5 images, removes 2, the system can allow another 2). Thanks
Hi Martyn
Sorry for not replying earlier, but I've been a little bit busy these days.
If I understood you correctly, that would be quite easy:
My plugin fires the "simpleuploads.startUpload" event whenever the user tries to upload a new file, so you could use a custom validation like I wrote in
http://alfonsoml.blogspot.com/2013/12/validation-of-files-with-simpleuploads.html
that checks the number of images that are in the content at that moment and allows or rejects new images.
Thanks for the reply. I'm just starting back at this now after winter break, hoping to put something together from your example. I seem to be getting an error "TypeError: CKEDITOR.editor.on is not a function". I couldn't see how you set editor, is this approach almost correct... Not really sure where to set "on" method.
$(function() {
CKEDITOR.replaceAll( 'js-ckeditor' );
CKEDITOR.editor.on('simpleuploads.startUpload', function (ev) {
// here I plan to check for number of images using a regex for and if too many found, ev.cancel()
});
});
You don't really need to wrap this code in a jQuery call (unless you really want to use some jQuery inside).
CKEDITOR.editor is nothing, you might want to use CKEDITOR.instances, but then you need to know upfront the name of the instances and anyway that's a bad approach if you're using the replaceAll call.
Instead you must listen for every created instance and then add the listener to each instance, look at the source code of http://www.martinezdelizarrondo.com/ckplugins/simpleuploads.demo4/validation.html and you'll see the CKEDITOR.on('instanceReady', function(e) call, then you might just want to apply the same check for every instance like it's done in this case for the fourth div.
And in order to check the number of images, just query the DOM instead of trying to parse the HTML with a regex because that's usually much harder.
Alfonso, como vai?
Quando faço o upload, o mesmo acontece, porém não é mostrado na tela do ckeditor.
Se verifico no servidor, a imagem está gravada corretamente.
Interessante que aparece a seguinte mensagem de erro:
Error posting the file to
filebrowser.php?action=upload&CKEditor=vMateria&CKEditorFuncNum=2&langCode=pt-br
Invalid data returned (check console)
Já observei que existe uma questão semelhante do Mark Dale.
Poderia me ajudar?
Obrigado,
Álvaro
Ciao Alvaro
If the file is saved correctly then your only problem is that your script isn't returning the expected format for the data.
Look at http://alfonsoml.blogspot.com.es/2009/12/using-your-own-uploader-in-ckeditor.html or https://github.com/AlfonsoML/CKEditorUploader that explain the format that CKEditor expects.
Basically you need to add echo "<script type='text/javascript'> window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message')</script>";
to your server script.
With the current version of SimpleUploads you can use any other format that you prefer, but that's a little bit more complicated and isn't required for most of the uses.
Hi Alfonso,
This plugin can also be applied to Apex (Oracle Aplication Express) version 3.6.4.
regards,
@Ismael
I have no idea at all because Oracle might have done some strange customizations.
Start by testing the ImagePaste plugin as I state because that's the easiest way to check if your system uses normal configuration or it requires specific instructions (that I have no idea of)
Thanks, paste the image also serves to the ckeditor 3.6.4, for reviewing just say from version 4?
Ismael, no entiendo el la pregunta.
El plugin de ImagePaste debería seguir funcionando con el CKEditor 3.6.4, aunque esa es una versión muy antigua.
SimpleUploads igualmente también debería seguir funcionando a menos de que en alguno de los últimos ajustes haya roto algo (hace mucho que dejé de probar 3.6)
Lo recomendable en un programa como CKEditor es intentar usar una versión actualizada y no entiendo cómo Oracle sigue usando algo tan viejo en vez de instalar al menos 4.3 por decir algo.
Disappointed i can't get imagepaste to work. Using CKEditor version 4.4.6 on zen cart.
Image upload works correctly, using the correct config.js file as autogrow plugin i also installed is working.
If i drag and drop a file into the editor window and then save it is still showing as a base64 code when viewing source. Tried closing the browser and clearing cache.
Any suggestions?
@Neil Price
At least you're following my advice and testing before paying. Other people rush without bothering to test and then the frustration and the need to find the answer is greater if they have any problem.
Obviously, you're testing with Firefox, right?
Have you checked the console in case there's any error or warning?
Can you send me a URL to test?
I checked the console and oddly it is not showing the plugin being loaded.
The order i see is:
GET http://localhost/imagepaste/editors/ckeditor/config.js [HTTP/1.1 200 OK 0ms]
GET http://localhost/imagepaste/editors/ckeditor/skins/kama/editor.css [HTTP/1.1 304 Not Modified 0ms]
GET http://localhost/imagepaste/editors/ckeditor/lang/en.js [HTTP/1.1 304 Not Modified 0ms]
config.extraPlugins='imagepaste';
is listed before config.extraPlugins='autogrow'; in config.js
I have checked that the imagepaste dir is in the plugins dir and have downloaded it twice to rule out corruption.
On localhot only at the moment but if needs be i can get it onto a server somewhere.
Thanks for the support.
Ok, that's your problem.
You're setting extraPlugins twice, so the first assignment is lost.
Use this:
config.extraPlugins='imagepaste,autogrow';
That's a start. Now seeing
GET http://localhost/imagepaste/editors/ckeditor/plugins/imagepaste/plugin.js [HTTP/1.1 304 Not Modified 3ms]
GET http://localhost/imagepaste/editors/ckeditor/plugins/autogrow/plugin.js [HTTP/1.1 304 Not Modified 1ms]
in console. No errors listed but still have baser64 code for the new dropped in image.
Hi Alfonso,
Forgot to confirm, yes, using FF
Ok, you're almost there:
CKEditor doesn't support natively drop and so that plugin only supported pasted images.
Instead of dropping the file, copy it (or open it with an editor and copy its contents) and paste it into editor.
If that works then you're ready to use the full SimpleUploads with support for other browsers as well as drag&drop, API to use it with other plugins, etc...
No, still showing as base64.
Upload of an image is working ok if i add an image via the standard ckeditor image method so i doubt if there is an issue with the upload side of it.
When my plugin detects a pasted image with base64 it should start the upload and you should see that in the network tab.
If that doesn't happens then there's something that I'm missing.
Now I can't think of any explanation of your problem, so I would need to check a live demo, either a public server, or your own computer via something like teamviewer because it must be very simple in the end.
Any advance on a fix for this after i gave you access to a site that has the code installed?
Hi Neil
I replied to your G+ message (twice).
In your setup you're missing the fileBrowserUploadUrl, so CKEditor isn't configured to upload files at all, I don't understand why you say that it works for you.
Zen Cart has a file called ckeditor_upload.php that is located outside of the editor directory. This is how the upload is set up to function on ZC.
What do you suggest
ZenCart might have that script, but in the demo that you provided me that file wasn't assigned to the upload URL.
At least when I tested that demo I wasn't able to upload any file at all.
Alfonso:
Estoy probando el plug-in con CKEditor y funciona bien, para archivos .png, con Copy paste en Firefox.
La version comercial funciona para todos los tipos de imagenes correcto?.
Una pregunta mas. En esta version del plugin hice un cambio a la funcion xhr.onload (plugin.js) para que en lugar de setearse atributos al elemento theImage se cambiara el elemento theImage por un span con cierta sintaxis, porque es lo que en nuestro wiki hacemos cuando se inserta una imagen (es decir se crea un wiki link que apunta a la nueva pagina de tipo imagen). Es decir en modo Edicion en nuestro wiki en el CKEditor no vemos la imagen sino una macro que indica link a dicha imagen.
Ese cambio ya lo hice en la prueba que estoy haciendo, pero se podría hacer también en la version paga?.
Hola Claudia
Sí, la versión comercial funciona con png, gif, jpg... eso sí, otro tipo de ficheros como webp y similares no van a ser reconocidos por defecto como imágen y sería necesario que cambie la configuración (y otro tema aparte es que los navegadores muestren correctamente esas imágenes).
En cualquier caso, puede probar la demo del plugin que está en mi servidor para verificar que se pueden usar otras imágenes y con otros navegadores.
Otro matiz a tener en cuenta es que aunque la imagen original sea un jpg, si se pega siempre se convertirá a png, ya que el propio navegador es el que realiza el cambio.
sobre lo que resulta insertado en el contenido, por un lado el plugin cuenta con un evento una vez que ha completado la subida del fichero y usándolo puede añadir un código en su página para que cree el span que desea en vez de tener que modificar el plugin ya que luego eso siempre va a retrasar y dificultar cualquier actualización ya que hay que volver a encontrar dónde se hicieron los cambios y esperar que yo no haya cambiado también ese código.
Hi,
It is possible to have the SimpleUploads plugin with just add an image button ?
And without the bellows fonctions:
- drag-and-drop an image,
- and, copy (Ctrl+C)/ paste (Ctrl+V) an image.
best regards
Med
Hi medovic
If I were the one to use your page I would hate you for forcing me to click a button instead of allowing me to drop from the window that I have besides the browser, but if you want to do it, you can prevent any upload checking the "context" object in the startUpload event:
CKEDITOR.on("instanceReady", function(e) {
e.editor.on('simpleuploads.startUpload', function (ev) {
// File name
var data = ev.data;
var context = data.context;
if (!context.name || context.name != "addimage")
{
alert( "Sorry, use the button" );
ev.cancel();
}
});
});
Hi Alfonso,
Thanks for the responses.
Eventually I'll let the drag-and-drop operation :), but I have another question: in the bar with icons, can I have just the icon that allows to upload images (jpg jpeg gif png bnp)? And how to implement a control which will block the upload files no image via drag-and-drop.
Thank you for your clarification.
best regards
Med
To add only the button to upload images define a custom toolbar with only the "addImage" button.
and you can control which files are allowed in the startUpload event.
Hi Alfonso,
Is there any trail version available for this plugin, I want to test it before Buy.
I had try to use 'ImagePaste' plugin, but it's not working
The main test is the ImagePaste plugin. If that doesn't work and you don't know why then you can bet that the full version won't work.
Hi Alfonso,
The file was uploaded for the delete request is simple to upload test.
file path : http://www.martinezdelizarrondo.com/userfiles/file/
file name :
1. (초안)Redmine 매뉴얼_v0_1.pdf
2. 업무보고.txt
3. 개인면담자료(최인호).docx
4. QA의역할.docx
5. 정철_B2B제휴업체_강좌신청서_온라인_전화영어_신청서_최인호.xls
6. PMP 132_주말_근로자직업능력개발훈련.pdf
delete file please.
Thanks for bringing this to my attention.
There's a cron job scheduled to automatically clean up everyday the uploaded files but for some reason it hasn't been working.
I've cleaned everything now and I'll make it work again automatically.
thank you, Alfonso~
Hello,
Thank you for your script, however I have a question related to drag and drop feature.
I need to upload the dropped image into a specific folder structure let's say
2015
--05
----
is that possible?
Thank you.
Hi,
I purchased 2/20/15 and no longer have access to download. How can I re-download?
Is there a specific email? All I found was PayPal receipt.
Thanks!
@Geo:
Yes, you can modify your uploader to save the files any way that you want. Instead of using a fixed path you can create it on the fly based on the current date, the logged in user, etc...
That's not related to my plugin, but just to the uploader.php, CKFinder, upload.ashx, etc... that you're using
@Brandon
I'm sorry for that problem. I added a small change to the plugin and I just published the new version expecting that the download links were automatically changed to use the new one.
I've sent you the new link.
Hi,
I'm using CKeditor 4.4 + CKFinder 2.5 but I don't like the tab "Upload Image". the main problem is that when I start with an upload I can't understand what it is happened (no progress bar and the button "upload to server" is always enabled). I see the demo of your plugin and it seems right for my site. Can I integrate your plugin with CKeditor and CKFinder? The settings of CKfinder for the images (dimensions, compression, thumbnail, etc...) are ok but I want to solve user interface for upload with your plugin.
Yes, of course that this plugins works with CKFinder.
As you already have configured CKFinder, you just need to add this plugin to get all the features that you can test in my demo.
What would be a great addition is if the plugin handled copying images from microsoft word such as the "images from word" plugin (which is very clunky interface).
The other thing I note is that when pasting content from word, it looses text styling (font colour, size etc.) which is painful, where as without the "simply uploads" plugin installed it keeps the styling when pasting.
Hi Mark
If you test IE11 you should be able to directly paste the images included in a Word document.
The rest of the browsers don't implement the required features so I can't do anything about that and the "Images from Word" is probably the best that you can get.
The formatting of the pasted content shouldn't be affected by this plugin, if it's HTML then I don't do anything, and if there's an image CKEditor doesn't do anything.
Are you sure that you're testing changing only if this plugin is enabled or not?
Hi Alfonso, I have just purchase simple uploads, and the copy paste feature is working properly but the drag and drop and the insert imagen option from the toolbar are not. Another issue I'm having is that I save the content into an html field and then I send that html via email. What happends is that the image that I have copy pasted in the content is not included in the email. If you give me your email address I can send you a video showing my screen to see if you can help me solve this issues.
thank you,
Florencia
Alfonso, también me pasa que usando google chrome al hacer copy paste la imagen queda gris con 0% y una cruz negra arriba. Al dar click derecho sobre la cruz salta un pop up de google chrome que dice: Debido a la configuración de seguridad de su navegador, el editor no tiene acceso al portapapeles. Es necesario que lo pegue de nuevo en esta ventana.
Sabés cómo habilitar eso en chrome?
gracias
saludos
Hola Florencia
Ya te he respondido a tu correo, lo más probable es que haya algún error imprevisto con los datos que devuelve tu servidor, si lo puedes comprobar encontraremos el problema y lo solucionaremos pronto.
It's a very useful plugin, and I've successfully integrated it into my 2 systems.
It would be better that image copy/paste (not base64 img) could be used in IE9+, but now it only support IE 11, Firefox and chrome.
IE9 doesn't support pasting images, so you must upgrade your browser if you want to have nice features.
There's nothing that I can do about it, and surely working on outdated browsers is one of the worst ways to spend my time, I'm more interested about what will happen when Edge is released.
hi, is there going to have Edge support soon?
Hi Ying
Add 3 votes here: https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/8964523-support-html5-drag-and-drop-of-files-from-explorer
Hi Alfonso.
I bought your plugin and it's works great.
But Image Upload Button does not work in chrome.
and also it does not work in your demo site..
http://www.martinezdelizarrondo.com/ckplugins/simpleuploads.demo4/
So can you check if it works or not? in Chrome?
Thank you.
I've tested right now with Chrome 45.0.2454.93 m and it works fine for me. Maybe your problem is due to some extension in Chrome.
I'm going to evaluate this good plug-in for enterprise license. Do you provide "trial version"?
I need to do some proof of concept works to initiate purchasing process.
Hello
You should test first the ImagePaste plugin and verify that the images are saved correctly on your server. Once that works, then you can be sure that you'll be able to use all the features of this plugin.
Hello! We are an ONG (Education and Government Transparency topics) and we have serveral instances of administration of micro websites based in our TLD domain http://poderopedia.cl/. Will work the "single" domain version of your script?
Thank you!
Yes, no problem at all.
Just make sure that you have already enabled normal file uploads and then you'll be able to just add this plugin to get all the enhancements.
Hi,
Is your plugin working with clipboard copy page. means when user copy text+image from MSWORD and paste into the CKEditor. It will upload the image automattically those are in the clipboard.
/Shahid
Alfonso, I mean, what about several instances of administration by subdomains, ie. admin1.poderopedia.cl, admin2.poderopedia.cl, admin3.poderopedia.cl, all of them for the ONG. Will work the "single" domain version? Single domain wich means 1 TLD?
@juanpablob
For a NGO it's OK to use the single site license, life is hard enough.
Other businesses that charge for each subdomain would require an enterprise license, but there's no problem to use the single site in your situation.
@Shahid
As you've said, if the image is in the clipboard my plugin will upload it, but if you're using Chrome or Firefox that won't happen when you copy content from Word.
In any case, test the demo thoroughly and test any combination that you want. If it doesn't work there, then it means that the browser isn't putting the image in the clipboard.
Please, read the description above because this is explained in the differences between browsers.
PLease refer to the post of Mark Dale above (given below also)
******************************************************* said...
I was using ImagePaste, which seemed to be working just fine - but then suddenly stopped.
I am using the ASP.Net version of CKFinder
I have purchased the license for simple uploads but am getting the following error whenever I try to upload a file (not just by pasting)
Error posting the file to
/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images&CKEditor1&CKEditorFincNum=2&langCode=en-gb
Invalid data returned (check console)
The file is actually arriving on the server in UserFiles but is not rendered in the WYSIWYG panel (and is not saved)
********************************************************************
I am having the same issue with asp.net
It works well in localhost but failed in a shared host domain
may be due to the basepath issue
Has any one found teh solution & what dows one put in the basepat for remote host
I did find it from server.mappath command.But it does not seem to work
not able to upload image :
check screenshot : http://i64.tinypic.com/iqvamo.png
thanks
That means that the URL that you're returning for the uploaded image is wrong.
Check the configuration of your upload script and adjust it so it returns a valid URL. This is something that you should have configured before trying to add this plugin because it's part of the basic upload system of CKEditor.
I don't know if you're really trying to save the uploaded files inside the /ckeditor/plugins/simpleuploads/uploads folder, but I would strongly advise you not to do so and store them in a folder outside of CKEditor because that will help greatly whenever you want to upgrade CKEditor or change anything.
Hi,
I have purchased your plugins and it works great on mobile devices with web browser.
But when integrated in a webview (both ios and android) that doesn't works...
Nothing is pasted into the editor on android and error on ios is "Invalid data returned"
Can you help me to solve this problem ?
Thanks to you.
Jérôme
Hello Jerome
I don't know about iOS, but on Android I think that you can connect with Chrome on your computer to get the webview and debug the data that it's sent and received.
Or you could even change the console.log calls to alerts so they are clearly shown.
You have to find out what's the response sent by the server to understand why it's failing.
current version?
is 4.3.11 ?
The latest version that I sent this month is 4.3.17
Check your spam folder if you didn't received it.
Hi Alfonso
What is the lastest version of "SimpleUploads" and "GoogleMaps"?
I have been using simpleuploads4.3.14 and googlemaps3.5.8
If it was upgraded, let me download.
Thx in advance.
Post a Comment