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;
- white-space: -moz-pre-wrap;
- white-space: -pre-wrap;
- white-space: -o-pre-wrap;
- word-wrap: break-word;
- 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>