Editable Plugin

Based on the Editable="" attribute.

HTML

<span Editable="?:Editable Text!">Editable Text!</span><br />
<span Editable="|:Drop|Down!|Options">Drop</span><br />
<span Editable="!:Disabled Text">Disabled Text</span>

SCSS

span[Editable] {
    border: 1px solid #eee;
    cursor: pointer;
    display: inline-block;
    
    line-height: 20px;
    vertical-align: middle;
    
    height: 20px; min-height: 20px;
    width: 150px; min-width: 150px;
}

span[Editable^="!:"] {
    color: #999;
    cursor: text;
    text-shadow: #eee 1px 1px 1px;
}

span[Editable], input.Editor, select.Editor {
    font-family: Verdana, sans-serif;
    font-size: 12px;
}
span[Editable^="?:"], span[Editable^="|:"] { text-indent: 5px; }
input.Editor { text-indent: 3px; }

JavaScript

$(function () {

    // Load the Default Editors
    window.Editors = {
        
        // The function takes the [Editable] element and a set of options
        // and returns an initialized Editor element.
        '?': function(el, options) {
            var $el = $(el);
            var $editor = $('<input type="text" />')
                .html(options.init).val(options.init)
                .bind('change.Editable blur.Editable', function (ev) {
                    $el.html($editor.val())
                       .attr('Editable', '?:' + $editor.val())
                       .trigger('edit.Editable');
                    $editor.remove();
                });
                    
            return $editor;
        },
        '|': function(el, options) {
            var $el = $(el);
            options.position.height += 4;
            options.position.width  += 4;
            
            var $editor = $('<select />')
                .bind('change.Editable', function (ev) {
                    var optionString = $.map($editor.find('option'), function(item, index) {
                        return ($editor.val() == $(item).val() ? 'x=' : '') + $(item).val(); 
                    }).join('|');
                    
                    $el.html($editor.val())
                        .attr('Editable', '|:' + optionString)
                        .trigger('edit.Editable');
                    $editor.remove();
                });
                    
            $.each(options.init.split('|'), function (index, item) {
                if (item.match(/^x=/))
                    $editor.append($('<option selected="true" />')
                       .attr('value', item.substring(2))
                       .html(item.substring(2))
                    );
                else
                    $editor.append($('<option />')
                       .attr('value', item).html(item)
                    );
            });
            
            return $editor;
        }
       ...