The contenteditable attribute - editing and saving content directly on the page

09.08.18 IT / Html 4588

HTML today has very rich functionalities and they are constantly expanding. For example, you can edit the content right on the page, without switching to the material editing mode. To do this, simply apply the contenteditable attribute and write a small JavaScript code that will send the save to the server.

How to use the contenteditable attribute ? Sample code below:

  & lt; p class = "content" contenteditable> Editable content & lt; / p>  

It is enough to simply specify the contenteditable attribute without a value - and almost any element can become editable this way. But how do you save your changes? To do this, you need to use JavaScript and send the modified content to the server using Ajax.

What JavaScript code might look like to implement the save content function? For example, if Use the jQuery Library , then:

  // find the element with the content class and set the handler that will be triggered when the focus on the element is lost
$ ('. content'). blur (function () {
// send changes to the server, which should return ok if changes were successfully saved
$ .post ('/ ajax / handler.php', $ (this) .text (), function (data) {
if (data == 'ok') {
// if successful, display information about it
alert ('Changes have been successfully saved');
} else {
// in case of an error, display information about it
alert ('An error has occurred');
}
});
});
 

Thus, it is quite easy to edit the text directly on the page and save it . Of course, you can improve the code and make a small visual editor that would simplify the work with the text. Drupal , for example, has a visual editor Quick Edit that allows you to edit content right on the page, but this already another topic. It should be noted that the implementation of the contenteditable attribute may differ in different browsers, but the main thing is that this attribute is supported in almost all browsers.