2010/06/28

Nesting dialogs in CKEditor

The task of upgrading the Google Maps plugin from FCKeditor to CKEditor is getting closer to the end, and in this post I'll show a few screenshots about doing little crazy things in CKEditor (ok, I have done this kind of crazy things previously).

First, let's start with an almost normal CKEditor instance, the only difference is the last button that lanches the new plugin

1

This dialog has four tabs and below them a Google Maps instance. Showing there an instance that was visible in any tab was one of the first problems that I needed to workaround.

2

As there was no previous map, it defaults to the third tab in order to ease the task of doing a search of our desired location. Now I'm not searching for anything special, so let's see the fourth tab. There it's possible to add markers, texts and in the future lines and areas as well as KML files. So let's add a marker by clicking the tool and then a point in the map

3

 After clicking the map, a new dialog is shown to edit the properties of the marker, the tooltip that will be shown, the width of the info window and its contents (at the moment it's still missing the button to change the icon color)

Look carefully, yes, it's a CKEditor instance nested in the dialog, so it's possible to write some nice formatted text, and a picture or a link. Of course, that means nesting another dialog!

 From bottom to top: Main CKEditor instance, Google Maps dialog, Marker dialog (with another CKEditor instance), and Link dialog.

After closing the link and marker dialogs we can get back to the edited map and test the marker in the first tab (ok, all the code still isn't hooked up, but you get the idea):

The nested CKEditor instance seems to work nicely without any need to do any strange workaround, but I still have to test it thoroughly because the problems might arise only under certain conditions. Anyway I'm happy with that part.

 

4 comments:

bronson said...

Very very cool. Is the source code anywhere?

I don't have a need for a google maps plugin right now but I look forward to experimenting with it.

Alfonso said...

No, the code is only on my computer as it still needs further work to hook up all the dialogs and finish the rest of functionality.

I might publish some posts explaining how to do some things, but don't expect this plugin to be released as open source, it means a lot of work and the only thing that I've got from other plugins released that way are support requests.

pilsY said...

Would i be able to buy this component?

Alfonso said...

Yes, when I finish it will be possible to license it. Some guys offered to sponsor the development and it was almost ready but now they have disappeared.

So I'm back to working on things that interest me like the SendToPhone project as that's something that I might use everyday.