Front End Editor in HTML5

Introduction

This article explains the contenteditable attribute of HTML5 that can make a web page a full and fast rich-text editor. In HTML5 any element can be editable. Edited content can be saved in a database or in local storage.

The contenteditable attribute can have one of the following three states:

To make content editable:
contenteditable="" or contenteditable="true"
To make content not editable:
contenteditable="false"
To make an element editable if it's immediate parent element is editable. This is the default value.
contenteditable="inherit"

Example: Here we have two divs.

First Div: Content is editable.
Second Div: The CSS of the div is editable. To show CSS inside the div we use a little style trick {display: block;}.

Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>
ContentEditable
</title>
<style>
#cssEditable style{display: block;}
</style>
</head>
<body>
<h2>Editable Content</h2>
<div id="contentEditable" contenteditable="true">
<style scoped>
#contentEditable { margin: 1.5em 0; }
[contenteditable="true"] { padding: 10px; outline: 2px dashed #CCC; }
[contenteditable="true"]:hover { outline: 2px dashed #0090D2; }
</style>
<p>Hi, this is the div whose content is editable in browsers that support <code>HTML5</code>. click here and start typing.</p>
</div>
<h2>Editable CSS</h2>
<div id="cssEditable" contenteditable="true">
<div id="style-block">
<style contenteditable>
#cssEditable {
background: #fff;
color: #444;
}
[contenteditable="true"]{
padding: 10px;
outline: 3px dashed #CCC;
}
[contenteditable="true"]:hover{
background: rgba(255, 255, 153, 1);
outline: 3px dashed #0090D2;
}
</style>
</div>
</div>
</body>
</html>

Now we know how to use contenteditable. In the next example, we will make the entire web page that is editable. In this example, we do changes in CSS and JavaScript and see the changes.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title contenteditable>Content</title>
<style class="default">
head, [contenteditable] {
display: block;
}
style.default,
script.default {
display: none;
}
style, script {
font-family: Consolas, monospace;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
padding: 10px 10px;
}
style:before {
content: 'CSS';
color: red;
}
script:before {
content: 'JavaScript';
color: blue;
}
</style>
</head>
<body>
<div id="content">
<h1 contenteditable>Everything is <strong>editable</strong> in this page.</h1>
<h2 contenteditable>Let's try!</h2>
</div>
<style contenteditable>
html {
font: 14px Helvetica, Arial, sans-serif;
margin: 10%;
margin-top:2%;
}
body {
background: yellow;
color: #586E75;
}
title {
font-size: 6em;
color: #B58900;
word-wrap: break-word;
}
style, script {
background: #EEE8D5;
border-top: 1px solid #93A1A1;
}
</style>
<script id="js" contenteditable>
function createParagraph(text) {
var p = document.createElement('p');
p.innerHTML = text;
p.setAttribute('contenteditable', 'true');
var content = document.getElementById('content');
content.appendChild(p);
}
createParagraph("Here you can add new paragraph. Do changes in below CSS and JavaScript and see the effect.");
</script>
<script class="default">
var timer,
js = document.getElementById('js'),
delay = 2000;
js.onkeyup = function(event) {
if (typeof timer != "undefined") {
clearTimeout(timer);
timer = 0;
}
timer = setTimeout(executeCode, delay);
};
function executeCode() {
var script = document.createElement("script");
script.type = "text/javascript";
script.innerHTML = js.innerHTML;
js.parentNode.insertBefore(script, js);
}
</script>
</body>
</html>

Conclusion

In this article, we studied Front End Editor in HTML5.