jquery.editable-example.html

<div id="editable-area">
    <p>
        <em class="start-info">Double click on the text to edit</em>
        <em class="edit-info" style="display: none">
            Start typing to change the text
            <span class="info mac">(cmd + &uarr; or cmd + &darr; to change font size)</span>
            <span class="info windows">(ctrl + &uarr; or ctrl + &darr; to change font size)</span>
        </em>
    </p>
    <div class="editable">
        Sed ut perspiciatis unde...
    </div>
</div>
<script src="/js/jquery/jquery.editable.min.js"></script>
<script>

    // Create reference to parent contaier
    var $editArea = jQuery('#editable-area');

    // Display correct short key info depending on OS
    if( navigator.platform.indexOf('Mac') > -1 ) {
        $editArea.find('.info.mac').show();
    } else {
        $editArea.find('.info.windows').show();
    }

    $editArea.find('.editable')

        // Apply editable feature
        .editable({
            callback: function(data) {

                if( data.fontSize ) {
                    alert('You changed the font size to '+data.fontSize);
                }

                // Switch info text
                $editArea.find('em').hide();
                $editArea.find('.start-info').show();
            }
        })

        // Switch info text when starting to edit
        .on('edit', function() {
            $editArea.find('em').hide();
            $editArea.find('.edit-info').show();
        });
</script>