mootools inlineEdit Plugin

Introduction

Hey! this is an old version of this plugin. Check out this new version, its so much better! inlineEdit3, with a cool save pack just for you.

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

Example B

This is an example of the light-weight, flexible inline editing plugin for mootools.<br>I am so cool!

    aaa<br>aa<br>aaa<br><br>sss

  1. adsas <BR>dadasd
  2. Enjoy inline editing on all text elements inside 'adadkjxcnjkhnjkhnkjnkd<br>edsit

  1. gsdgsdgsdgsgsdgsdhhhhgyrdy dit is een test
  2. Enjoy inlinevccvbcvbcbditing hhhall <br><br><br><br><br>elements with the class name 'editable'ssadsa
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

html>