The contenteditable attribute - editing and saving content directly on the page
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.
Latest articles
- 09.07.22IT / Misc Convert office files DOC, DOCX, DOCM, RTF to DOCX, DOCM, DOC, RTF, PDF, HTML, XML, TXT formats without loss and markup changes
- 07.07.22IT / Safety How to protect PHP, JS, HTML, CSS source code - obfuscation, minification, compression and encryption
- 06.07.22IT / Safety Connection not secure, problem with Lets Encrypt - how to fix expired 09/30/2021 DST Root CA X3, remove it manually and install ISRG Root X1. Example on MS Windows 7
- 08.07.21IT / Misc How to make a free translation for a website without an API, translate documents in Google Translate
- 06.07.21IT / Misc How to make a subscription button on a website, a subscriber base and automatic mailing