Making InPlaceEditor more usable

Scriptaculous InPlaceEditor is a great tool to ligthen a web page with editing needs. But it’s hard for a neophyte to guess that he has to click on it to edit. Unless you move your mouse over it you wont know!

Here’s a little tweek that uses a link to launch the edit mode of an InPlaceEditor.


<span id="my_text">My text</span>
<a href="javascript:void(0);" id="my_text_edit">edit</a>
<script type="text/javascript">
	var my_text_editor = new Ajax.InPlaceEditor('my_text',
		'your/url/to/edit', {
		externalControl:'my_text_edit',
		highlightcolor: 'transparent',
		clickToEditText: ''
	});
	$('my_text_edit').onclick = function(){
		my_text_editor.enterEditMode();
	}
	my_text_editor.dispose();
</script>

Leave a comment

Filed under js

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s