Front End Editor in HTML5

Manju lata Yadav
11y
6.9k
0
1

Article

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 next example we will made 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>