Modifying the generated element in SimpleUploads.

I think that I've already written about this type of requests, but as I've not been able to quickly find it, it deserved a simple post.

Request: after uploading an image with SimpleUploads, wrap it in a link element for use with any type of effect like ColorBox. eg:

<a href="filepath" class="colorbox" target="_blank"><img src="filepath"/></a>

This is achieved using the 'simpleuploads.finishedUpload' event, add in your page this code (adjust it according to your needs:

CKEDITOR.on('instanceReady', function(e) {

	// the real listener
	e.editor.on( 'simpleuploads.finishedUpload' , function(ev) {
		var editor = ev.editor;
		// CKEditor.dom.element
		var element = ev.data.element;
		//console.log(element)

		var a = document.createElement('a');
		a.href = element.getAttribute('src');
		a.className = 'colorbox';
		a.target = '_blank';

		// create a CKEditor.dom.element
		var ckLink = new CKEDITOR.dom.element(a);
		// replace the image with the link
		ckLink.replace(element);
		// insert the link into the image
		element.appendTo(ckLink);
	});
});

New plugin for CKEditor: ImageToolbar

Recently I've been working in order to create for Uritec a new plugin for CKEditor, it was needed due to the way that the Style system works in CKEditor.

First the Styles dropdown shows the styles that can be applied to the current element as well as its container(s); look at the official demo and select the image, now click on the Styles selector and you'll see there "Object Styles", "Paragraph Styles" and "Character Styles", something that it's not too user friendly if they just want to modify the image. The normal user wants simple things.

The second main problem is that even if they focus just on the Object Styles, you (as page author/designer) can't restrict the way that the styles work between them, so if you want to use a class to apply a 1px gray border, and a different class to create a slight rotation and shadow, the user can't apply both at the same time (unless you apply inline styles that we all know it's bound to fail).

So the goal was to allow to apply groups of classes that can be mixed so you set one group of classes to define different types of borders and another one to apply color filters, etc... Also, let's keep in mind that the align center has been disabled in CKEditor for those who prefer to use the classic Image plugin although it's easily done using display:block and margin:* auto, so one obvious group is alignment.

Putting all those buttons to show up always in the toolbar was considered a bad idea because most of the time they won't be used, and providing instead a "contextual" toolbar that shows only when an image is selected  was considered the best option.

Taking all of that into consideration ImageToolbar was born, designed to work in both classic (framed) editor as well as new inline mode, and compatible with the normal Image plugin and the Enhanced Image plugin. You can play at its demo with some predefined styles, but you can define whatever you want as long as you're able to do it with CSS classes. Or if you feel lazy today, check the 1 min. demo on YouTube.

If you use the Enhanced Image plugin you should know already that the way to define your CSS file requires taking some extra care, we have added some notes about it in a small guide about styling images in CKEditor, and due to those widget wrappers and upcast/downcast you'll find that it's much more powerful when you configure ImageToolbar with the classic image as you aren't restricted by the "Enhanced image" limitations.

Lastly, remember that unlike other plugins that claim to be free but then require you a monthly payment, this is a one time payment that will give you any future update.

Updates for the GoogleMaps plugin

It seems that I haven't write here anything about the Google Maps plugin for a whole year, and so some people might think that this is a dead project but it's far from that! it's alive and under continuous little improvements.

A summary of the new features since 3.1 (one year ago):

• 3.2:
  • It's possible to delete single points in lines and areas.
  • Enabled Traffic and Weather layers.
• 3.2.x:
  • Option to use custom icons in the markers.
  • It's possible to edit lines and areas.
• 3.3:
  • Button in the editor for markers to insert a "Destination" link.
• 3.3.x
  • Compatibility with CKEditor 4.

Besides that list, there are other adjustments to improve performance, add new translations, and of course fixing all the reported bugs but that list is boring :-)

A quick review of those new features:

Editing of lines and areas

Version 3.1 finally brought back the option to create Lines and Areas but the options to edit them or remove some points wasn't possible at the moment. Fortunatelly after some time those features were available and I added them to the maps editor.

New Layers

Sometimes Google adds a new option in the map, the Traffic layer allows to show the state of the road traffic in the map and the Weather shows the the typical sun/clouds/storm... icons overlayed if the zoom isn't too close.

Directions

This as a common request: an option to set in the window of a marker a link that provides the driving directions to arrive to a place. Now there's an icon in the embedded editor that inserts such a link for the current marker and when clicked it will launch Google Maps with the requested data.

CKEditor 4

This is the latest "feature" that I've added. Although most of the code of v4 is backwards compatible with CKEditor 3.x there are some changes that required some debugging to find out a solution to understand the problem and also the excesive padding in the default skin for v4 means that the contents of many fields were not correctly displayed.

At the moment I think that everything is working correctly, but I still want to perform more tests before being confident that I've tested everything (and so far I'm already getting tired of the problems caused by the dialogs in v4).

Anyway, here's a new demo to test Google Maps in CKEditor 4.