Nicest way to add an edit feature to a text/link?

I've a bunch of text (links and raw text) on my site that I want moderators and administrators to be able to edit. I somehow need to add the possibility to edit the text in question.

My first thought was to add an edit link next to each part that could be edited, but that doesn't look right. To many 'Edit' links where added to the page, it looked really strange.

My second idea was to add some key-combo to each link that can be edited. Like; hold shift key while clicking on the given text/link to edit.

My question is now; is there a good way to add a shortcut like this to any text/lin开发者_开发百科k on the site using JavaScript.

Adding an option to the right click menu would be spot-on, but that doesn't seems to be possible.

This is how it looks right now:

The feature doesn't need to be supported by any other browser then Chrome.

How about hiding the 'Edit' link and only displaying it when the mouse hovers over the associated items?

Here's a crude example: http://jsfiddle.net/xaU5k/

Note that this should degrade gracefully if the browser does not have javascript enabled, i.e. link should still be accessible.

First of all, I'd suggest using a Javascript framework as it will make the entire process much simpler. Personally I use jQuery, but there are others around, so if you don't use one already then I'd suggest looking into it.

You'll need to detect click events on any of the links on your page that you want to edit - this could be any link, or it could be only certain ones (designated with a class) - so you'll need to bind a click event handler to each of these links. How you do this is dependent on whether or not you're using regular Javascript or a framework.

If you choose to use jQuery, it may look something like this:

<script>
$(document).ready(function() {
    $('.edit').click(function(event) {
        if(event.shiftKey) {
            // handle shift-click
                    // will need to call event.preventDefault() to prevent navigating to the href of the link
        }
        else {
            // handle non-shift-click - possibly just do nothing?
        }
    });
});
</script>

That binds a click event handler to any DOM element that has the 'edit' class assigned to it. If you look into jQuery selectors in more detail you can limit this to much greater depth if required.

I think the best way is to have an edit link for every link, but hide all by default and show them only on hover. Also, make them a bit transparent, so they are not distracting.

You show know that adding a right click menu is possible by subscribing to the click event and watching which button was pressed. Then prevent the browser from firing and show div under the cursor.

Here is a nice CSS only example for webkit

check out this fiddle here