jQuery Plugin For Editable Web Content - Live Edit

Live Edit is a jQuery plugin that popups a rich text editor panel attached to the selected content that allows you to edit the text directly from the page.

See also:

• jQuery Plugin For In-Place Editing of Data - jinplace
• jQuery Based Inplace Html5 Rich Text Editor - Popline
• jQuery Plugin For Editable Html Elements - trocar.js
• jQuery Plugin For Editable Field On Hover Over - liveeditor

Basic Usage:

1. Include the jQuery liveedit's stylesheet file in the page.

<link rel="stylesheet" href="jquery-liveedit.css">

2. Markup html structure with Html5 data-* attributes.

<article class="live-edit" data-model="article" data-id="1" data-url="/articles">
<div class="content" data-editable="true" data-name="content" data-text-options="true">
Your Content Goes Here
</div>  
</article>

3. Include the jQuery library and jQuery liveedit's script file in the bottom of your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery-liveedit.js"></script>

4. Call the plugin.

<script>
$(function(){
$(".live-edit").liveEdit();
});
</script>

---

This awesome jQuery plugin is developed by alvesdan. For more Advanced Usages, please check the demo page or visit the official website.