mootools inlineEdit Plugin


An even newer version of inlineEdit is out! Check out inlineEdit3, with plenty of awesome examples such as save after edit functionality.

Hey. This script has been updated. Check out inlineEdit2, its better.

We all knew it was possible and easy enough, I just finally took the time and made it. So now I present, mootools inlineEdit Plugin.

At only 4kb inlineEdit is a lightweight, easy solution so check out the example and then download it for yourself.


Inline Editing

This is an example of the light-weight, flexible inline editing plugin for mootools.


  • Make A Page completely editable and add an onSave function to save the page.
  • Look Cool.
  • Conserve Space.


  1. var inlineEditor = new inlineEdit('editarea', {indicatorText: 'edit this'});
  2. Enjoy inline editing on all text elements inside 'editarea'

Alt Steps

  1. var inlineEditor = new inlineEdit('editable', {indicatorText: 'edit this'});
  2. Enjoy inline editing on all elements with the class name 'editable'
Toggle Editting


Make selected text elements Inline Editable


mootools Moo.js, Utility.js, Element.js, Function.js, Dom.js, Array.js, String.js, Tips.js, Event.js, Common.js, Window.Size.js


Justin Maier,


MIT-style license.


Make selected text elements Inline Editable.


Will only work on h1,h2,h3,h4,h5,li,dt,dd,p and elements given a specified class name.

The input box has a class named after the element its editing. If your editing a p element the input box will be given a .p class, this helps counter the inabilities of getStyle.js

Tested in Firefox 2.0, and IE7 on XP SP2

Known Bugs

Doesn't grab all applied styles, can't grab from CSS style sheet unless there is a class name given to the element in which case it will grab from there. See getStyle.js

Must specify a border width of 0 if you dont want a border on an element. (h3, .h3{border:0;}).


element the element you want to apply the inline editing to

options an object. See options below.


onStart Add additon affects to what happens when you start editing (like changing text color)

onChange Add additon affects to what happens when you finish editing (like changing text color)

observingAction The Action required to begin editing an element. (defaults to 'click')

editingClass The Class applied to the input/textarea element. (defaults to 'editLine')

showIndicator if set to true a tooltip will show that the element is editable.

indicatorClass the prefix for your tooltip class name. (defaults to 'editIndicator')
the whole tooltip will have as classname: editIndicator-tip

indicatorText the text to be displayed in the edit indicator. (defaults to 'editable')


(start code)
<div id="editarea">
<h1>I am Justin</h1>
<p>Hello World</p>
var inlineEditor = new inlineEdit('editarea',{indicatorText: 'edit this'}); //Makes text inside 'editarea' inline editable
inlineEditor.deactivate(); //Deactivates the ability to edit the text
inlineEditor.toggle(); //Toggles the ability to edit the text (in this situation it would turn it back on since we just turned it off)


deactivate Disables inline editing.

toggle Toggles Editablity on and off.


Get it while its hot. inlineEdit.js | inlineEdit.compressed.js | mootools.dependancies.js