Black Friday discount

During the rest of the month, I've reduced 20% off the price in the three plugins for CKEditor that I sell here


Google Maps

Image Maps

That means that single site licenses now are 12€ and OEM licenses 40€. I still haven't modified the pages in this blog, but the prices in FetchApp are already adjusted, so right after clicking the first Pay button you'll see the correct price.

Remember that the three plugins are compatible with CKEditor 3.6 up to the current 4.3 and future updates to add new features or bug fixes are included, it's a one time payment. This offer will end on 1st of December.

(no, I don't really expect that anybody will care about this, but hey!, why not to offer this deal?)




Finally disabled the G+ Comments around here

It was horrible to look through old posts and then find out that someone has posted a comment on a post and it was left there for weeks without me noticing it because Google has done such a poor job with the integration between Blogger and Google+

So I've disabled right now the option to use the G+ Comments here. It seems that this has caused all the new comments to go away, but that's a little price to pay compared to the lack of notifications when someone wanted to ask a question.


SimpleUploads and the new image2 widget

CKEditor 4.3 has introduced a new image plugin that is a showcase of its widget system.

The problem is that any image that has been added through direct drag&drop or paste into the editor with the SimpleUploads plugin behaves like an image (big surprise), and it's not such a widget.

That means that after inserting it, you can't edit the image until you reload the content, and it's a little bit ugly that situation because you can't be sure if everything is working correctly or if your image will be gone or whatever.

So for the moment you can use this patch:

// Let's add this to every editor on the page. You can instead add it only to a specific editor.
CKEDITOR.on('instanceReady', function(e) {
    // the real listener
    e.editor.on( 'simpleuploads.finishedUpload' , function(ev) {
        var editor = ev.editor
        // workaround for image2 support
        if (editor.widgets && editor.plugins.image2) {
            var element = ev.data.element;
            if (element.getName()=="img")
                editor.widgets.initOn(element, "image2");

It's adjusted to work only with the "image2" plugin, if you want to use other plugin to handle images then you must replace the name of it in the call to initOn.

It simply uses the event fired after an element has been inserted to check first if your editor has the widgets and image2 plugins active, then verifies that the new element is an image, and in that case it manually inits the widget on that image.



Including additional data with the file in SimpleUploads

A question that many people have asked for a long time is how to include additional info (for example the state of a new checkbox in a dialog or some Anti-CSRF tokens) when a file is uploaded in CKEditor with the "Quick upload" option available in some of the dialogs.
Most of the time no one answered, or the answer involved modifying the core files of CKEditor. In any case, there isn't a simple solution available.
WIth SimpleUploads 4 that's a very simple task, just set a listener for the "simpleuploads.startUpload" event that it's fired and you can the modify the target URL if you want to change the Query parameters, or include an "extraFields" object to the event data and the properties of such object will be sent as additional fields in the POST request.
Let's see this with an example, for me it's the best way to understand things.
First, suppose that you have modified the image dialog to include a custom checkbox, and that in your page you have defined an object that provides some tokens that should be used on each upload to verify that it hasn't been tampered. That's not part of the exercise so I'm not gonna explain that here, the problem is how to add that data to the uploads, not the system that you're using.
You just need to write a listener for the editor, and you can even create a listener for any editor in the page.
// Let's add this to every editor on the page. You can instead add it only to a specific editor.
CKEDITOR.on('instanceReady', function(e) {
    // the real listener
    e.editor.on( 'simpleuploads.startUpload' , function(ev) {

// write code here...

the inner event will be fired on each upload that it's started, we just have to check if it's fired while we are on the image dialog to add the checkbox, and always add the additional POST fields.
Remember that this is just a basic sample, you can decide to send all the info as POST, or include more fields, check other functions, this is just a sample about how to modify the URL and query String and include extra POST fields:
  var data = ev.data;
  // the context property provides info about where the upload is being used
  // var context = data.context;

  // Check if there's a dialog open:
  var dialog = CKEDITOR.dialog.getCurrent();
  if (dialog)
   var name = dialog.getName();
   if (name=="image")
    // Get the value of our new checkbox and if it's checked add it as a parameter to the URL
    var value = dialog.getValueOf("Upload", "chkCustom");
    if (value)
     ev.data.url += "&checked=on";

  // add CSRF tokens
  var extraFields = {
   // These is sample code, the CKEDITOR.config.action, CKEDITOR.config.formID and Core objects
   // are items specific to a custom implementation of CKEditor.
   // Fill the extraFields object with whatever you might need.
   "Action" : CKEDITOR.config.action,
   "FormID" : CKEDITOR.config.formID
  extraFields[ Core.Get("SessionName") ] = Core.Get("SessionID");

  ev.data.extraFields = extraFields;
All of the code is up and running in a new demo.
As you can see customizing the uploads in CKEditor now it's a very simple task and you have full control about what happens.

PS: Although I've said that those POST fields are fictional, in fact they are based on the setup used by OTRS 3.2.9. In order to integrate CKEditor they are using a custom build to modify the file uploads, but with this plugin such custom patches are no longer needed.


Demo videos for the Google Maps plugin for CKEditor

I've realize that I haven't announced it here, but about a month ago I spent some time creating two videos showing most of the features available in the Google Maps plugin for CKEditor.

The idea behind the plugin is that although being able to play with the demo page and test the features by yourself, sometimes you might not be aware of all the available options, and despite my horrible pronunciation (I beg you pardon) i decided that it would be good to provide a video explaining the features available in the plugin.

Of course, creating such thorough explanation means that I found little issues, I used different browsers to test the features and record the video so in the end besides the videos I released a new version of the plugin with some improvements (and testing the dialogs was when I felt the need to improve the uploads in the CKEditor dialogs, it was a pity that some features like adding a KML file or a new icon couldn't been done by drag & drop from my computer)

The first video is available here:  Introduction to Google Maps plugin for CKEditor

It explain the main features of the two first tabs of the dialog, and how the map is rendered in the final page. Most of the options are just what you expect and you can see any change in the preview map of the dialog.

Some of the features that I added thanks to recording this video was the ability to start with the StreetView of a location or with a rotated map.

The second video is this one: Drawing shapes on Google Maps with CKEditor.

In order to record this video I finished an option that I've had in the works for some time but I never had the time to test it, drawing circles.

The video starts showing how to place markers, change the icon of the marker, how a simple CKEditor is embedded in the dialog to allow editing the popup that shows when you click on a marker, or how to insert a simple option so that the visitor can get driving directions from his location to that place.

Then it shows the other drawing options, lines, polygons and circles, all can be controlled to adjust the color, width, opacity; so you get the map that you want.

Please, keep the closed captions on and the volume low, but watch the videos and if you have some question about them or you think that I can explain something else that I've missed, then drop me a note.


Finally, SimpleUploads 4 is here

After a long time working on this upgrade, I've reached the point where I think that it's better to release it and write all the documentation that I had in mind afterwards, so expect more updates about all the features in the following days.

Since quite a long time ago I felt that the name "ImagePaste" wasn't correct for a plugin that allows to also drop files and since version 3.0 offered two buttons to upload files or images with just two clicks and get them inserted into CKEditor.

So with along a new feature set, the main change (meaning the change that will cause more problems for existing users because instead of just replacing the files now you have to edit again your config file) is the rename of the old "imagepaste" to "simpleuploads"

That name tries to explain better what it does, it's not only about "images" and not only about "paste", it's a set of features to offer the users a way to "upload" files in a "simple" way.

The best way to check how it works is to test the demo.

Skipping the explanation about the existing features, the new ones are focused on the dialogs of CKEditor and improving the upload progress:

When you upload a file in the editor, now you get a progress indicator and the option to cancel the upload. The existing progress for images has been improved to also include the cancel option.

The plugin now integrates into the CKEditor dialogs, if it finds a "quickUpload" button it will be replaced with its own one to offer the same simple upload (click button, select a file and you're done instead of having to press the "upload to server"), as well as progress information, cancelation option and the full control on the upload (modify the upload URL, check file size, extension, automatica validation with a whitelist or blacklist...)

And besides modifying the QuickUpload button, the dialog itself now becomes a drop target, you can drop a file from your computer on those dialogs (even if there's only a browse server button is enough) and it will be uploaded and the url of the dialog filled with the new URL.

Another improvement in this version is the inclusion of optional parameters in the upload data, for example if you want to use some anti-CSRF token, modifying the QuickUpload system in CKEditor required some tricks, but now it's a piece of cake. Ditto if you want to add for example a checkbox to scale the image to a maximum, just before the upload begins there's an event where you can control many features.

I'll try to provide examples about how to customize CKEditor with this plugin so you can easily upload files and do whatever you want with them, so keep an eye on the blog because I'll try to write new posts explaining different ways to use the plugin. I've created now a main page here to provide a central point for all the information about SimpleUploads.

PS: currently I really dislike the comment system in Blogger because I don't get any notification when someone comments a post, so I might move to another platform if this bug persists. Meanwhile, have a little patience if I don't reply, it's usually better to send me a mail or direct message by + me.