jQuery Rapid CSS/XHTML Prototyping (QRP)

I stopped for a while working on my Python CMS, but in my head I was already playing for a while with in place editing(like Adobe Contribute) and a round context menu.

I finally decided to spend some time on trying it out. As with most things I make, I imagined it to be very simple, but in reality you always encounter things that you simply did not thought about. Because this is just a tryout, I did not bother to check it in any browser except Safari.

The idea is this: throw in some jQuery and plugins, set contentEditable to True, write some JS glue, and TADA! Finished! The reality: Not very different, but it takes some time.

I started out with the image and the css for the context menu, then I turned on the contentEditable. After some playing around with that I started to write some JS to let the menu appear on the right spot and enter the clicked tag(mind the difference between currentTarget and target!). Now I looked for a bunch of jQuery plugins, the ones I currently use are: rigchtClick, markitup and in the future maybe thickbox. The problem with thickbox is that it applies a padding and margin of 0 to all elements. I previously used TinyMCE, but it does not use jQuery and it refused to interact with the content part(TinyMCE turns your textarea into an iframe, and I was to lazy to modify my script to read an write to the iframe).

So here you have it.

Here is a little howto:

1. Fire up Safari 4 (other browsers are not guaranteed to work)
2. Open index.html within the zip file (extract it maybe? 😉 )
3. Right click in the content area, choose a tag, or type the name of it in the text field.
4. Click our newly created tag, now you’re in editing mode!
5. You can now: edit the text in place, drag it around, edit the id and class, assign css to it, edit it with markitup, or add more tags!