mootools inlineEdit Plugin

Introduction

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.

Example

Inline Editing

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

Abilities

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

Steps

  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
Documentation

inlineEdit.js

Make selected text elements Inline Editable

Dependancies

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

Author

Justin Maier, http://justinmaier.com

License

MIT-style license.

inlineEdit

Make selected text elements Inline Editable.

Note

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;}).

Arguments

element the element you want to apply the inline editing to

options an object. See options below.

Options

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')

Example

(start code)
<div id="editarea">
<h1>I am Justin</h1>
<p>Hello World</p>
</div>
<script>
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)
</script>
(end)

Properties

deactivate Disables inline editing.

toggle Toggles Editablity on and off.

Download

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

Discuss