Contenteditable attribute is very lesser known HTML attributes by most of webdeveloper. It help you change the read only property of tag to rich-text editor. In this i will explain how to create content editable field and change the save data of the field in database using php and ajax.

Contenteditable Attribute

Replace me with your text!!!….

You can make any div editable by adding contenteditable attribute and set property to true. You can try above example to check what is contenteditable. This attribute has three possible values: true,  false, and inherit for google chrome you also use plaintext-only. You also define tabindex for your contenteditable so you can focus on field when user press on tab key.

 Enable contenteditable using javascript:

You also make your div contenteditable using javascript

and html code is like this

Make Entire webpage editable use this code

If you want to make entire web page editable you can use designMode property and turn designMode on to edit

Save contenteditable field data using ajax and php

You also save Content editable fields data to server with help of ajax. Here is a simple example and code you try

HTML Code : index.php

Now after send data to server we can get that data same we can get from form.

PHP Code : get.php

i simply get data from requested page and echo it you can save it to your database and perform any action.

Browser Support for contenteditable

All most every browser support this tag.

Since then, contenteditable has been standardized by the WHATWG.

IE FIREFOX CHROME SAFARI OPERA
5.5+ 3.5+ 4.0+ 3.1+ 9.0+

Google also use Contenteditable for Gmail Compose Message and also use in Share status in Google Plus.