HTML 5

Front End Editor in HTML5

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:

  1. To make content editable:
    contenteditable="" or contenteditable="true"

  2. To make content not editable:
    contenteditable="false"

  3. 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

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.     <head>  
  4.        <meta charset="utf-8" />  
  5.        <title>  
  6.         ContentEditable     
  7.            </title>     
  8.   
  9.        <style>          
  10.         #cssEditable style{display: block;}  
  11.        </style>        
  12.     
  13.     </head>  
  14.     <body>  
  15.             <h2>Editable Content</h2>  
  16.             <div id="contentEditable" contenteditable="true">                   
  17.                 <style scoped>  
  18.                     #contentEditable { margin: 1.5em 0; }  
  19.                     [contenteditable="true"] { padding: 10px; outline: 2px dashed #CCC; }  
  20.                     [contenteditable="true"]:hover { outline: 2px dashed #0090D2; }  
  21.                 </style>  
  22.                 <p>Hi, this is the div whose content is editable in browsers that support <code>HTML5</code>. click here and start typing.</p>      
  23.          </div>         
  24.             <h2>Editable CSS</h2>  
  25.             <div id="cssEditable" contenteditable="true">               
  26.                 <div id="style-block">  
  27.                 <style contenteditable>  
  28.                     #cssEditable {  
  29.                        background: #fff;  
  30.                        color: #444;  
  31.                     }  
  32.                     [contenteditable="true"]{  
  33.                        padding: 10px;  
  34.                        outline: 3px dashed #CCC;  
  35.                     }  
  36.                     [contenteditable="true"]:hover{  
  37.                        background: rgba(255, 255, 153, 1);  
  38.                        outline: 3px dashed #0090D2;  
  39.                     }  
  40.                 </style>  
  41.                 </div>                  
  42.             </div>  
  43.       
  44.     </body>  
  45. </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.

 

  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.   <meta charset="UTF-8">  
  5.   <title contenteditable>Content</title>  
  6.   <style class="default">  
  7.     head, [contenteditable] {  
  8.       display: block;  
  9.     }  
  10.     style.default,  
  11.     script.default {  
  12.       display: none;  
  13.     }  
  14.     style, script {  
  15.       font-family: Consolas, monospace;  
  16.       white-space: pre-wrap;       /* css-3 */  
  17.       white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */  
  18.       white-space: -pre-wrap;      /* Opera 4-6 */  
  19.       white-space: -o-pre-wrap;    /* Opera 7 */  
  20.       word-wrap: break-word;       /* Internet Explorer 5.5+ */  
  21.       padding: 10px 10px;  
  22.     }  
  23.     style:before {  
  24.       content: 'CSS';  
  25.       color: red;  
  26.     }  
  27.     script:before {  
  28.       content: 'JavaScript';  
  29.       color: blue;  
  30.     }  
  31.   </style>  
  32. </head>  
  33. <body>  
  34.   <div id="content">  
  35.      <h1 contenteditable>Everything is <strong>editable</strong> in this page.</h1>  
  36.      <h2 contenteditable>Let's try!</h2>  
  37. </div>  
  38.   
  39. <style contenteditable>  
  40. html {  
  41.   font: 14px Helvetica, Arial, sans-serif;  
  42.   margin: 10%;  
  43.   margin-top:2%;  
  44. }  
  45. body {  
  46.   background: yellow;  
  47.   color: #586E75;  
  48. }  
  49. title {  
  50.   font-size: 6em;  
  51.   color: #B58900;  
  52.   word-wrap:  break-word;  
  53. }  
  54. style, script {  
  55.   background: #EEE8D5;  
  56.   border-top: 1px solid #93A1A1;  
  57. }  
  58. </style>  
  59. <script id="js" contenteditable>  
  60. function createParagraph(text) {  
  61.   var p = document.createElement('p');  
  62.   p.innerHTML = text;  
  63.   p.setAttribute('contenteditable', 'true');  
  64.   var content = document.getElementById('content');  
  65.   content.appendChild(p);  
  66. }  
  67. createParagraph("Here you can add new paragraph. Do changes in below CSS and JavaScript and see the effect.");  
  68. </script>  
  69. <script class="default">  
  70.   var timer,  
  71.       js = document.getElementById('js'),  
  72.       delay = 2000;  
  73.   js.onkeyup = function(event) {  
  74.     if (typeof timer != "undefined") {  
  75.       clearTimeout(timer);  
  76.       timer = 0;  
  77.     }  
  78.     timer = setTimeout(executeCode, delay);  
  79.   };  
  80.   
  81.  function executeCode() {  
  82.     var script = document.createElement("script");  
  83.     script.type = "text/javascript";  
  84.     script.innerHTML = js.innerHTML;  
  85.     js.parentNode.insertBefore(script, js);  
  86.   }  
  87.   
  88. </script>  
  89.   
  90. </body>  
  91. </html>  

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs