Let’s say you have a website and you’re tired of making constant updates to some portion of oft-changing content, e.g. a conference agenda. It would be nice to offload this tedious work to a content owner who so often makes typos. But this content owner is non-technical and is a visual person. They need a WYSIWYG editor that would allow them to make changes directly on what it is that they want to edit, not directly in a database or something cryptic like a JSON file.
HTML5 supports the contenteditable attribute which makes any element editable. In the screenshot below, on a part of the byline is made editable.
Simple add the attribute “contenteditable=true” to the tag that wraps the text you want to make editable.
<p>Last Edited by <span id="author" contenteditable="true">Monty Shokeen</span>
</p>When the content owner clicks on the text to editor, a black outline appears making it look like a form field.
The contenteditable attribute can be added to as many HTML elements as you want. Here is a live example showing three different editable fields with changes saved to local storage. Here’s an example showing how you can save the changes in JSON format and post it to a URL endpoint using AJAX or Fetch.