Post
Ask Question

Make the Element Content Editable in HTML5

Introduction

 
In this article, we are going to learn how to make an element of HTML5 as an editable content. It allows the developers to edit content dynamically on a web page. In this tutorial, we will learn about the contenteditable property of HTML5. To achieve this feature in HTML5 we use the "Contenteditable" attribute in the specified tag of HTML5. But you can add only text, the rest can only be removed. To make the page editable, you need to put the tag attribute contenteditable = "true". It is supported by in all modern browsers such as Chrome, Safari, Firefox, Opera, etc.
 
We can set three types of states of contenteditable.
  • True: We can set the value of contenteditable to true. This indicates that the element is editable.
  • False: We can set the value of contentediatble to false. This indicates that the element is not editable.
  • Inherit: This is the default value. It indicates that the element is editable if its immediate parent element is editable.
The Contenteditable attribute of HTML5 elements makes that element editable and any children of that element will also become editable unless the child elements are explicitly not editable.
 
Here we will show an example of using content editable on the website.
 
Example
 
In this example, we define a div and make this div editable. We can edit the content of div and we also define several buttons that edit the content of div dynamically. Follow the steps to make an element editable.
 
Step 1 First we define the buttons and div which we make editable.
  1. <body>  
  2.    <div id="buttons">  
  3.       <form id="thebuttons">  
  4.          <input type="button" class="buttonstyle" value="Bold" onclick="format('bold');" />  
  5.          <input type="button" class="buttonstyle" value="Italic" onclick="format('italic');" />  
  6.          <input type="button"  class="buttonstyle" value="Underline" onclick="format('underline');" />  
  7.           |   
  8.          <input type="button" class="buttonstyle" value="Left" onclick="format('Justifyleft');" />  
  9.          <input type="button" class="buttonstyle" value="Right" onclick="format('justiyfyright');" />  
  10.          <input type="button" class="buttonstyle" value="Center" onclick="format('justitycenter');" />  
  11.          <br /><br />  
  12.          <input type="button" class="buttonstyle" value="Font" onclick="format('fontname','Font name');" />  
  13.          <input type="button" class="buttonstyle" value="Text Color" onclick="format('forecolor','Select color');" />  
  14.           |   
  15.          <input type="button" class="buttonstyle" value="Undo" onclick="format('undo');" />  
  16.          <input type="button"  class="buttonstyle" value="Redo" onclick="format('redo');" />  
  17.          <input type="button" id="clear" onclick="clearall()" />  
  18.       </form>  
  19.    </div>  
  20.    <br />  
  21.    <div id="myContent" contentEditable="true" spellcheck="true">  
  22.       HTML or Hypertext Markup Language is a formatting language that programmers and developers use to create documents on the Web. The HTML5 language has specific rules that allow placement and format of the text, graphics, video, and audio on a Web page. Programmers use these programming tags or elements to produce web pages in unique and creative ways.HTML5 is still a work in progress.  
  23.       However, the major browsers support many of the new HTML5 elements and APIs.  
  24.    </div>  
  25. </body> 
Step 2 This is JavaScript code that sets the value of buttons to content of div.
  1. <script type="text/javascript">  
  2.         var loaded = false;  
  3.         var editable = null;  
  4.         function format(cmd, promptString) {  
  5.   var value = null;  
  6.             if (!loaded) return true;  
  7.             if (promptString) value = prompt(promptString);  
  8.              document.execCommand(cmd, false, value);  
  9.              localStorage.setItem('contenteditable', document.getElementById('myContent').innerHTML);  
  10. }  
  11.   
  12. function init() {  
  13.   loaded = true;  
  14.             editable = document.getElementById('myContent');  
  15.              document.execCommand('styleWithCSS', false, true);  
  16. }  
  17.   
  18. function clearall() {  
  19.   localstorage.clear();  
  20.         window.location = window.location;  
  21. }  
  22.   
  23. window.onload = init;  
  24.      </script> 
Step 3 We use some CSS code that is applied to the buttons and div.
  1. <style>  
  2.  body {  
  3.   background-color: #CCCCFF;  
  4. }  
  5.   
  6. .buttonstyle {  
  7.   font-size: medium;  
  8.   font-weight: bold;  
  9.   color: #0000FF;  
  10.   background-color: #CCCCCC;  
  11.   width: 91px;  
  12.   height: 33px;  
  13. }  
  14.   
  15. #myContent {  
  16.   width: 599px;  
  17.   height: 294px;  
  18.   background-color: #FFFFFF;  
  19.   padding-left: 10px;  
  20.   font-size: x-large;  
  21. }  
  22.  </style> 
Step 4 The Complete Code looks like this:
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2.    <head>  
  3.       <title></title>  
  4.       <script type="text/javascript">   
  5.          var loaded = false;        var editable = null;  
  6.          function format(cmd, promptString)  
  7.           {  
  8.              var value = null;  
  9.              if (!loaded) return true;  
  10.              if (promptString) value = prompt(promptString);  
  11.               document.execCommand(cmd, false, value);  
  12.               localStorage.setItem('contenteditable', document.getElementById('myContent').innerHTML);  
  13.          }  
  14.          function init()  
  15.          {             
  16.              loaded = true;  
  17.              editable = document.getElementById('myContent');  
  18.               document.execCommand('styleWithCSS', false, true);  
  19.          }  
  20.          function clearall()  
  21.          {  
  22.             localstorage.clear();  
  23.             windowwindow.location = window.location;  
  24.          }   
  25.          window.onload = init;  
  26.       </script>  
  27.       <style>  
  28.          body  
  29.          {  
  30.          background-color: #CCCCFF;  
  31.          }  
  32.          .buttonstyle  
  33.          {  
  34.          font-size: medium;  
  35.          font-weight: bold;  
  36.          color: #0000FF;  
  37.          background-color: #CCCCCC;  
  38.          width: 91px;  
  39.          height: 33px;  
  40.          }  
  41.          #myContent  
  42.          {  
  43.          width: 599px;  
  44.          height: 294px;  
  45.          background-color: #FFFFFF;  
  46.          padding-left: 10px;  
  47.          font-size: x-large;    
  48.          }  
  49.       </style>  
  50.       </head  
  51.    <body>  
  52.       <div id="buttons">  
  53.          <form id="thebuttons">  
  54.             <input type="button" class="buttonstyle" value="Bold" onclick="format('bold');" />  
  55.             <input type="button" class="buttonstyle" value="Italic" onclick="format('italic');" />  
  56.             <input type="button"  class="buttonstyle" value="Underline" onclick="format('underline');" />  
  57.              |   
  58.             <input type="button" class="buttonstyle" value="Left" onclick="format('Justifyleft');" />  
  59.             <input type="button" class="buttonstyle" value="Right" onclick="format('justiyfyright');" />  
  60.             <input type="button" class="buttonstyle" value="Center" onclick="format('justitycenter');" />  
  61.             <br /><br />  
  62.             <input type="button" class="buttonstyle" value="Font" onclick="format('fontname','Font name');" />  
  63.             <input type="button" class="buttonstyle" value="Text Color" onclick="format('forecolor','Select color');" />  
  64.              |   
  65.             <input type="button" class="buttonstyle" value="Undo" onclick="format('undo');" />  
  66.             <input type="button"  class="buttonstyle" value="Redo" onclick="format('redo');" />  
  67.             <input type="button" id="clear" onclick="clearall()" />  
  68.          </form>  
  69.       </div>  
  70.       <br />  
  71.       <div id="myContent" contentEditable="true" spellcheck="true">  
  72.          HTML or Hypertext Markup Language is a formatting language that programmers and developers use to create documents on the Web. The HTML5 language has specific rules that allow placement and format of text, graphics, video, and audio on a Web page. Programmers use these programming tags or elements to produce web pages in unique and creative ways.HTML5 is still a work in progress.  
  73.          However, the major browsers support many of the new HTML5 elements and APIs.  
  74.       </div>  
  75.    </body>  
  76. </html> 
Step 5 Press F5 to see the output on the browser.
 
1.gif
 
We applied Bold, Italic and Underline on the selected text.
 
2.gif
 
We set the font color, text color on the selected text.
 
3.gif
 
We can also undo and redo the changes that have been made in the text.
 
4 


Similar Articles