You can set options two different ways, first you can change the default values for any option:

EditInPlace.defaults['save_url'] = ’save.php’

Or for specific instances:

$('editme_textarea').editInPlace({form_type: 'textarea'});

Options that you’ll commonly override

  • save_url (false) - The URL that the XHR will be sent to
  • form_type (”text”) - The type of form to use, valid values are: text, textarea and select
  • auto_adjust (false) - When set to true this changes the form type from text to textarea (or the other way around) depending on how much text there is to edit
  • size (false) - Use this to specify the size of a text edit. By default (false) this will auto adjust by calculating a reasonable value at run time
  • max_size (60) - Maximum size for input fields
  • rows (false) - Number of rows to use for textarea fields. By default (false) this will auto adjust by calculating a reasonable value at run time
  • max_rows (25) - Maximum number of rows to use for textarea fields
  • cols (60) - Number of columns to use for textarea fields
  • save_on_enter (true) - Save edits when the enter key is pressed
  • cancel_on_esc (true) - Cancel edit when the escape key is pressed
  • focus_edit (true) - Move focus to the edit field when the edit form is displayed
  • select_text (false) - Select the text inside the edit field when the edit form is displayed
  • click_event (”click”) - The event to watch for to trigger the edit form. Valid values are: click and dblclick
  • more_data (false) - A Javascript object literal that will be passed along in the XHR when the edit is saved
  • select_options (false) - A Javascript object literal for select field options
  • external_control (false) - The DOM id of an external control that will trigger the edit field

Text that is displayed at various points

  • edit_title (”Click to edit.”) - The title attribute text on the element that is editable
  • empty_text (”Click to edit.”) - Text to display when the editable field is empty
  • saving_text (”Saving …”) - The text shown while waiting for a response to the save request
  • savebutton_text (”SAVE”) - Text to show on the save button
  • cancelbutton_text (”CANCEL”) - Text to show on the cancel button
  • savefailed_text (”Failed to save changes.”) - Text shown in an alert box when a save fails

CSS classes and colors

  • mouseover_highlight (”#ffff99″) - The background color that is set when the mouse moves over an editable field
  • editfield_class (”eip_editfield”) - CSS class applied to the edit form field
  • savebutton_class (”eip_savebutton”) - CSS class applied to the save button
  • cancelbutton_class (”eip_cancelbutton”) - CSS class applied to the cancel button
  • saving_class (”eip_saving”) - CSS class applied to the saving text. A background image can be used via this class to show an animation to let users know what is going on
  • empty_class (”eip_empty”) - CSS applied to editable elements that are empty

Templates - You can edit these if you like, but be very careful, it’s an easy way to break things. For that reason you’ll have to look at the source to see how the templates work.