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

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.


Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.