SilverIPE is a cross-browser in place editor JavaScript class. It is easy to use and the script itself is rather tiny (about 4kb compressed). It is well documented and easy to use.
SilverIPE will transform any span, div or paragraph into an in place editor. This means that, when an element of your choice is clicked, a text input or a textarea will appear, allowing you to edit the value of the element. Once you are done you can eighter Save or Cancel your changes. If you chose to save your changes, an Ajax request will be made to an URL of your choice, sending a POST parameter (the name of that parameter is up to you) containing the value of the newly edited text.
The Ajax request can be sent to any controller of your choice. It can be a PHP script, a Ruby controller, a Perl script or anything else you can think of. The only thing that your controller is required to do is to print (or echo) the new text value, so that your element (span, div or p...) can be updated with the new text.
SilverIPE works with span items. See if you can edit the following text:
Edit me!
SilverIPE can also be used on block elements such as Paragrahps and Divs.
I'm a paragraph! Try to edit me!
Additionally, SilverIPE will let you know if there is an error going on when sending the XMLHttpRequest. Try to edit the next example, an error will occur (this is normal.):
Try to edit me!
Getting SilverIPE running is extremely easy... Basically you just need to include it in your page. The following code snippet shows how to include SilverIPE in your page:
Don't forget to replace [-version] with the version you chose to download.
Once the script is included, all that's left to do is to create a new SilverIPE object. Again, this is very easy. One thing that you should keep in mind is that, you need to create the SilverIPE object after your target element has been inserted in the DOM. There are several ways to do that, use your prefered way. The simplest way is of course to create the object after you've created. Here's an example that shows how to do it.
Don't worry about the parameters and options, they will be explained right... here!
Those are the required parmaters when creating a new SilverIPE object. In order it looks like this:
Here's a list of all available options with their description, type and default values.
| Option Name | Description | Type | Default |
| parameterName | The name of the POST or GET parameter sent to your controller. | String | value |
| method | Either 'POST' or 'GET'. | String | POST |
| highlightColor | The hex color used when mousingover the element and when editing. | String | #FFFFBF |
| borderColor | The color of the input or textarea's border. | String | #000 |
| savingText | The text displayed while the new value is being saved. | String | saving... |
| saveButtonLabel | The Save Button text. | String | save |
| cancelButtonLabel | The Cancel Button text. | String | cancel |
| textWidth | The input or textarea's width in characters. | Number | 20 |
| textHeight | The textarea's height in characters (i.e. 4 = 4 lines of text). | Number | 4 |
| additionalParameters | Key/Value pairs, additional parameters to pass to your Server Side script. | Object | {} |
Here is an example constructing a new object and using all the options:
The controller is basically the script where you chose to send the Ajax request. This controller can do anything but it must do at least one thing: Echo the new text value so that your element can be updated. Here is a sample php script that would do just fine:
SilverIPE can be downloaded in 3 different format: Uncompressed, Minified (With JSMin) or Packed (With Dean Edwards packer). The 3 versions behave exactly the same way and the version you chose is totally up to you.
| Version | Size | Download Link |
| Uncompressed | 7kb | silveripe.0.2.js |
| Minified | 5kb | silveripe-jsmin.0.2.js |
| Packed | 4kb | silveripe-packed.0.2.js |