I've been working on a new project that has some content management features lately. It's a pretty big project and will take months to complete. I was messing with in-place editing with prototype and scriptaculous and found that I couldn't use the default editor for managing links. Normally when you're doing in-place editing you have a single piece of text/content that you want to edit. You click on it and it brings up the form. For editing links I need to edit the URL and the anchor text. I needed to have two separate fields for this and Ajax.InPlaceEditor from controls.js wasn't entirely up to the task.

I ended up inheriting from Ajax.InPlaceEditor and altering some of the behavior to handle link editing. I feel like it's pretty much a hack job but it does what I need it to do, so it seems good enough. I felt that it would be somewhat beneficial to upload the code for in-place link editing.

I only uploaded the javascript and a html demo. The server-side stuff isn't included since this will work across different web languages. I use Pylons and Mako, for example.

You can grab the demo here: http://alwaysmovefast.com/public_svn/in_place_link_editor.

To give a short example of what I did for the server-side stuff, this could be my controller/action:

class LinksController(BaseController): 
    def create(self): 
        c.link = { 
            'url': request.params['url'], 
            'anchor': request.params['anchor'], 
            'id': 'some_id' 
        } 
        return render('/links/create.mako') 

And this is what '/links/create.mako' could look like to update the page:

<a href="${c.link['url']}">${c.link['anchor']}</a> 

This is a very basic example. My create.mako actually looks something like this:

<script src="/javascripts/prototype.js"></script> 
<script src="/javascripts/scriptaculous.js"></script> 
<script src="/javascripts/application.js"></script> 
 
<script> 
    li = $('newlink'); 
    li.id = '${c.link['id']}'; 
 
    li.innerHTML = '<a href="${c.link['href']}">${c.link['anchor']}</a>'; 
 
    new_link = document.createElement('li'); 
    new_link.id = 'newlink'; 
    new_link.innerHTML = 'Insert Link'; 
 
    li.parentNode.appendChild(new_link); 
 
    new InPlaceLinkEditor('newlink', '/links/create'); 
</script> 

Basically what it does is update 'newlink' by changing its id to the id of the newly-created link on the server side and update the innerHTML of that object. It then creates a brand new link object and appends it to the old link's parent node. I then create a new InPlaceLinkEditor for the new 'newlink'. That's about it.

Hopefully you can find this stuff useful.