10 jQuery Inline Editor Plugins

Sam Deering
10 jQuery Inline Editors to help you manage your page content dynamically just like a CMS but on your webpage live! In search of some decent inplace editors, we found these really interesting scripts. Inplace editing or inline editing is very useful in editing the text on the same page without refreshing it hence making user interface more strong. See our tutorials below.


1. WYMeditor: web-based XHTML editor

A web-based WYSIWYM (What You See Is What You Mean) XHTML editor (not WYSIWYG). The main concept is to leave details of the document’s visual layout, and to concentrate on its structure and meaning, while trying to give the user as much comfort as possible (at least as WYSIWYG editors).
WYMeditor-web-based-XHTML-editor.jpg
Source


2. PimenTech-scripts: jquery.jframe.js

Provides an easy way to get an HTML frame-like behavior on DIV Elements with AJAX. It comes with Pimentech Scripts library. With jFrame, you can build smart, complex modern, internet apps without leaving the main page, without a single line of JavaScript!
PimenTech-scripts-jqueryjframejs.jpg
Source


3. Jeditable – Edit In Place Plugin For jQuery

Inplace editor plugin for jQuery with few lines of JavaScript code it will allow you to click and edit the content of different xhtml elements. Jeditable was based on Dylan Verheul’s editable.
Jeditable-Edit-In-Place-Plugin-For-jQuery-.jpg
Source


4. Editable

A simple way to create in place editing fields with jQuery.
editable.jpg
Source


5. Edit In Place with AJAX Using jQuery JavaScript Library

An AJAX (or AHAH) proof-of-concept page that allows the visitor to edit the very (x)HTML page they are viewing, without leaving the page.
Edit-In-Place-with-AJAX-Using-jQuery-JavaScript-Library.jpg
Source


6. TableEditor

Provides flexible in place editing of HTML tables. User defined handler functions can easily be dropped in to, for example, update the data source via an AJAX request.
TableEditor.jpg
Source


7. In-Line Text Edit

Allows users to edit blocks of text within the browser with an ajax call instead of a page reload. Uses semi-specific DOM Tree.
In-Line-Text-Edit.jpg
Source


8. AJAX instant edit script – clean HTML

This is an instant edit script that you might like. Enjoy!
AJAX-instant-edit-script-clean-HTML.jpg
Source


9. Inplace Rich Editor

Tested on FF 3+, IE 6+, Safari 4+, Chrome 11+ and Opera 10+
Inplace-Rich-Editor.jpg
Source

10. Josephscott Jeip

A simple jQuery edit inplace plugin.
Josephscott-Jeip.jpg
Source

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.