gistfile1.js

$(document).ready(function() {
  
  // Loop through each of the empty .editable elements and add filler edit text.
  $('.editable:empty').each(function(){
    $(this).text('Edit Me');
  });
  
  // On .editable blur() - when a user clicks off of an .editable element take it's text and pass it to the corresponding input.
  $('.editable').blur(function() {
    var editableContent = $(this).text();
    var inputID = '#' + $(this).data('editable-input-id');
    // If there isn't any content in the input area replace it with edit text filler text.
    if (editableContent == '') {
      var editableContent = '';
      $(this).text('Edit Me');
    }
    // Replace the input's value
    $(inputID).val(editableContent);
  });
  
});