Edit Any Element In Place - jQuery Editable
File Size: | 11.5 KB |
---|---|
Views Total: | 9476 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Editable is a simple, touch-friendly inline editing jQuery plugin which converts any valid html elements into an editable area (based on textarea) when double clicking/tapping on it.
How to use it:
1. Load the minified version of the jQuery Editable plugin after jQuery library and we're ready to go.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery.editable.min.js"></script>
2. Call the function on the target element to be editable on double click.
$('#element').editable();
3. To config the plugin, just pass the following options as an object to the editable()
function:
$('#element').editable({ // trigger event event : 'dblclick', // enables touch event touch : true, // converts \n to <br /> lineBreaks : true, // allows to change font size toggleFontSize : true, // close on enter closeOnEnter : false, // message to show when empty emptyMessage : false, // integrates with tinyMCE tinyMCE : false, // additional editor styles editorStyle : {}, // callback function callback : function( data ) { if( data.content ) { // Content has changed... } if( data.fontSize ) { // the font size has changed } // data.$el gives you a reference to the element that was edited data.$el.effect('blink'); } });
4. Determine whether the element is editable/editing or not:
var $el = $('#element'); if( $el.is(':editing') ) { // is editing } if( $elem.is(':editable') ) { // is editable } $('#element').on('edit', function(event, $editor) { // triggered when the element gets edited });
5. API methods.
// enter the editable mode $('#element').editable('open'); // close the editable mode $('#element').editable('close'); // destroy the plugin $('#element').editable('destroy');
This awesome jQuery plugin is developed by victorjonsson. For more Advanced Usages, please check the demo page or visit the official website.