sb.forms.editable.field

@Description: Creates a click to edit text block
@File: forms/editable.js
@Param: Object
type string input or textarea
editableElement object/string The element to edit #myDiv, $('#myDiv')
className string the classname for the widget, defaults to
attributes object additional html attributes you want assigned to the textfield, cols, rows, size, maxlength, etc
onBeforeEdit function Fires before editing begins, Can be used to load raw text wihtout HTML from server
onSave function Fires after save, send back to server, stop editing
@Example:

//use the following in a dblclick event for the text you want to make editable

var editor = sb.forms.editable.field({
    editableElement : e.target,
    type : 'textarea',
    onBeforeEdit : function(){},
    onSave : function(value){}
});

editor.edit();
//example CSS

.sb_forms_editable textarea{
    cursor:text;
    display:block;
    width:97%;
    height:100px;
    overflow:auto;
    font-family:tahoma;
    font-size:1.1em;
}

.sb_forms_editable editbar.input{
    margin-left:5px;
}

.sb_forms_editable editbar.textarea{
    display:block;
    text-align:right;
}

.sb_forms_editable button{
    background-color:#d88713;
    color:#7c4e0d;
}

.sb_forms_editable button:hover{
    background-color:#e2b370;
}

sb.forms.editable.field.addButton

@Description: Adds a button to the editBar
@File: forms/editable.js
@Example:

editor.addButton('email');

sb.forms.editable.field.edit

@Description: Put the editor in edit mode
@File: forms/editable.js
@Example:

editor.edit(target);

sb.forms.editable.field.editStop

@Description: Exit edit mode
@File: forms/editable.js
@Example:

editor.editStop();

sb.forms.editable.field.focus

@Description: Focuses on text area and puts cursor at top left. automatically fires after setValue
@File: forms/editable.js
@Example:

editor.focus();

sb.forms.editable.field.isNotEdited

@Description: Determines if field is edited or not
@File: forms/editable.js
@Example:

if(editor.isNotEdited()){}

sb.forms.editable.field.onBeforeEdit

@Description: Fires before editing begins. Can be used to load raw data with ajax
to fill the textField with. Reference the textField with this.textField. The default is
to use the innerHTML of the area being edited
@File: forms/editable.js
@Example:

editor.onBeforeEdit = function(){
        this.setValue('loading...');
        var editor = this;

        var aj = new sb.ajax({
            url : '/url/rawtext',
            data : {
                doc_id : doc_id
            },
            onResponse : function(raw_desc){
                editor.setValue(raw_desc);
            }
        }).fetch();
    };

sb.forms.editable.field.onButtonPress

@Description: Fires when a button is pressed other than save or cancel
@File: forms/editable.js
@Example:

editor.onButtonPress = function(e){
        var button = e.target;
    };

sb.forms.editable.field.onButtonUp

@Description: Fires after a button is pressed other than save or cancel
@File: forms/editable.js
@Example:

editor.onButtonUp = function(e){
        var button = e.target;
    };

sb.forms.editable.field.onEditStop

@Description: Fires when a button is pressed other than save or cancel
@File: forms/editable.js
@Example:

editor.onEditStop = function(){

    };

sb.forms.editable.field.onKeyDown

@Description: Fires when a key is pressed, lets you do something with it
@File: forms/editable.js
@Example:

editor.onKeyDown = function(e){};

sb.forms.editable.field.onKeyUp

@Description: Fires when a key is released, lets you do something with it
@File: forms/editable.js
@Example:

editor.onKeyDown = function(e){
        //get rid of digits
        e.target.value = e.target.value.replace(/\d/, '');
    };

sb.forms.editable.field.onMaxLength

@Description: Fires when user exceeds textField maxlength if set.
@File: forms/editable.js
@Example:

editor.onMaxLength = function(e){};

sb.forms.editable.field.setHTML

@Description: Sets the html of the element being edited, use in onSave after saving
@File: forms/editable.js
@Example:

editor.setHTML('<p>text that was edited</p>');

sb.forms.editable.field.setValue

@Description: Sets the value of the textField, use in onBeforeEdit after loading raw text from ajax
@File: forms/editable.js
@Example:

editor.setValue('text to edit');