edit div plugin

by John Allan

HTML

<div id="editor">some stuff goes here</div>
<br /><br />
<a id="editdiv" href="#editdiv">edit</a>

CSS

#editor{
    width:400px;
    min-height:100px;
}
.contentEditable{
    border:1px solid black;
    padding:10px;
}

JavaScript

/*  hcfEditDiv jquery plugin
    by: John Allan
    for: habanero
    on: March 14 2012

    $().hcfEditDiv();                           (instantiates the plugin, adds classes and save/cancel buttons)
    $().hcfEditDiv('save');                     (triggers a save, runs saveFunction)
    $().hcfEditDiv('cancel');                   (triggers a cancel, runs cancelFunction, removes classes and elements)
    $().hcfEditDiv('remove');                   (triggers a remove, removes classes and elements without running cancelFunction)

    'editableClass'     : 'contentEditable',    (class applied to div)
    'saveClass'         : 'hcfEditDivSave',        (class applied to save link)
    'saveCopy'          : 'save',               (copy for the save link)
    'cancelClass'       : 'hcfEditDivCancel',      (class applied to cancel link)
    'cancelCopy'        : 'cancel',             (copy for the cancel link)
    'buttonWrapperClass': '',                   (additional class for button wrapper div)
    'saveEvent'         : 'save.hcfEditDiv',    (event fired when save is requested, attached to DIV)
    'cancelEvent'       : 'cancel.hcfEditDiv'   (event fired when cancel is requested, attached to DIV)

*/

(function ($) {

  var methods = {
    init : function (options) {

        var settings = $.extend( {
            'editableClass'     : 'contentEditable',
            'targetTitle'       : 'this area is editable',
            'saveClass'         : 'editDivSave',
            'saveCopy'          : 'save',
            'saveTitleCopy'     : 'save the edit',
            'cancelClass'       : 'editDivCancel',
            'cancelCopy'        : 'cancel',
            'cancelTitleCopy'   : 'cancel the edit',
            'buttonWrapperClass': '',
            'saveEvent'         : 'save.hcfEditDiv',
            'cancelEvent'       : 'cancel.hcfEditDiv'
        }, options);

        return this.each(function () {
            var $this, save, cancel, buttonWrapper, editable;
       ...