Make the Element Content Editable in HTML5

Gaurav Gupta
12y
14.9k
0
0

Article

Introduction

In this article we are going to learn how to make an element of HTML5 as editable content. It allows the developers to edit content dynamically on a web page. In this tutorial we will learn about 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. Indicates that the element is editable if its immediate parent element is ediatble.

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

Follow the steps to make an element editable.

Step 1 First we define the buttons and div which we make editable.

<body>
<div id="buttons">
<form id="thebuttons">
<input type="button" class="buttonstyle" value="Bold" onclick="format('bold');" />
<input type="button" class="buttonstyle" value="Italic" onclick="format('italic');" />
<input type="button" class="buttonstyle" value="Underline" onclick="format('underline');" />
 | 
<input type="button" class="buttonstyle" value="Left" onclick="format('Justifyleft');" />
<input type="button" class="buttonstyle" value="Right" onclick="format('justiyfyright');" />
<input type="button" class="buttonstyle" value="Center" onclick="format('justitycenter');" />
<br /><br />
<input type="button" class="buttonstyle" value="Font" onclick="format('fontname','Font name');" />
<input type="button" class="buttonstyle" value="Text Color" onclick="format('forecolor','Select color');" />
 | 
<input type="button" class="buttonstyle" value="Undo" onclick="format('undo');" />
<input type="button" class="buttonstyle" value="Redo" onclick="format('redo');" />
<input type="button" id="clear" onclick="clearall()" />
</form>
</div>
<br />
<div id="myContent" contentEditable="true" spellcheck="true">
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.
However, the major browsers support many of the new HTML5 elements and APIs.
</div>
</body>

Step 2 This is JavaScript code that sets the value of buttons to content of div.

Step 3 We use some CSS code that is applied on the buttons and div.

Step 4 The Complete Code looks like this:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script type="text/javascript">
  var loaded = false;   var editable = null;
  function format(cmd, promptString)
{
  var value = null;
  if (!loaded) return true;
  if (promptString) value = prompt(promptString);
document.execCommand(cmd, false, value);
localStorage.setItem('contenteditable', document.getElementById('myContent').innerHTML);
}
  function init()
{
loaded = true;
editable = document.getElementById('myContent');
document.execCommand('styleWithCSS', false, true);
}
  function clearall()
{
localstorage.clear();
window.location = window.location;
}
window.onload = init;
   </script>
<style>
body
{
   background-color: #CCCCFF;
}
.buttonstyle
{
   font-size: medium;
   font-weight: bold;
   color: #0000FF;
   background-color: #CCCCCC;
   width: 91px;
   height: 33px;
}
#myContent
{
width: 599px;
height: 294px;
background-color: #FFFFFF;
padding-left: 10px;
font-size: x-large;
}
</style>
</head
<body>
<div id="buttons">
<form id="thebuttons">
<input type="button" class="buttonstyle" value="Bold" onclick="format('bold');" />
<input type="button" class="buttonstyle" value="Italic" onclick="format('italic');" />
<input type="button" class="buttonstyle" value="Underline" onclick="format('underline');" />
 | 
<input type="button" class="buttonstyle" value="Left" onclick="format('Justifyleft');" />
<input type="button" class="buttonstyle" value="Right" onclick="format('justiyfyright');" />
<input type="button" class="buttonstyle" value="Center" onclick="format('justitycenter');" />
<br /><br />
<input type="button" class="buttonstyle" value="Font" onclick="format('fontname','Font name');" />
<input type="button" class="buttonstyle" value="Text Color" onclick="format('forecolor','Select color');" />
 | 
<input type="button" class="buttonstyle" value="Undo" onclick="format('undo');" />
<input type="button" class="buttonstyle" value="Redo" onclick="format('redo');" />
<input type="button" id="clear" onclick="clearall()" />
</form>
</div>
<br />
<div id="myContent" contentEditable="true" spellcheck="true">
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.
However, the major browsers support many of the new HTML5 elements and APIs.
</div>
</body>
</html>

Step 5 Press F5 to see the output on the browser.

We applied Bold, Italic and Underline on the selected text.

We set the font color, text color on the selected text.

We can also undo and redo the changes that have been made on the text.

Up Next

Ebook Download

View all

A Guide to Mastering HTML5 CSS3 and JavaScript

Read by 3 people

Download Now!

Learn

View all