Edit-in-place with content Editable property

Edit-in-place with content Editable property


Firefox 3 was released on June 17, 2008, and from that time, Firefox 2 browser share is quickly dropping. Very soon it will become inefficient to continue supporting it. And we will be able to use a lot of new Firefox 3 features, such as canvas support, CSS and DOM improvements and other. I am really glad that Firefox3 supports the “contentEditable” property. Setting this attribute to “true” allows you to make parts of a document editable. This attribute was already supported by IE6/7/8, Safari, Chrome and Opera. So now we can start using it in our applications.

To test “contentEditable” I made a plugin that allows you to convert parts of the page into editable areas, just click on them and when you finish editing click outside. If you convert an inline element (h1...h5, p ) with this script, the line breaks will be disabled.

I am an editable heading.

I am a div, so you can add more paragraphs to me. I am a div, so you can add more paragraphs to me. I am a div, so you can add more paragraphs to me. I am a div, so you can add more paragraphs to me. I am a div, so you can add more paragraphs to me.

I am a "p" element, you can't add line breaks to me.

Download (Version 0.4)

How to use it?

With jQuery library
 
  $(document).ready(function(){
    $('.editable').editable(function(element){
      // function that will be called when the
      // user finishes editing and clicks outside of editable area
     
      // put your ajax request here
      $.ajax({
        type: "POST",
        url: "some.php",
        data: "newfieldvalue=" + element.html(),
        success: function(msg){
          alert( "Data Saved: " + msg );
        }
     });
 
    });
  });
Without jQuery library
 
  editableAreas.add('example_id', function(element){
    // function that will be called when the 
    // user finishes editing and clicks outside of editable area
    alert(element.innerHTML);
  });

We are done! You can now view the final result. As always please feel free to leave a comment to JoomlaOutsourceIndia@gmail.com.