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:
- Fire up Safari 4 (other browsers are not guaranteed to work)
- Open index.html within the zip file (extract it maybe? 😉 )
- Right click in the content area, choose a tag, or type the name of it in the text field.
- Click our newly created tag, now you’re in editing mode!
- 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!