HTML - Global contenteditable Attribute

The contenteditable attribute is an HTML global attribute that specifies or indicates whether or not the content present in the browser is editable by the user.

If an attribute is missing or incorrect, its value is inherited from the parent element, therefore the element is editable if its parent is editable.

This attribute take one of the following values −

  • true or an empty string, which means that the element is editable

  • false, which means that the element is not editable.

  • plaintext-only, which indicates that the element’s raw text is editable but rich text formatting is disabled.

If the attribute is given without a value, like <label contenteditable> content </label>, its value is treated as an empty string.

Syntax

Following is the syntax of the contenteditable attribute −

<element contenteditable = " true | false " >

Example

In the following example, let’s see the usage of the content editable attribute in this HTML document as follows −

<!DOCTYPE html>
<html>
<head>
   <style>
      blockquote {
         background: #eee;
         border-radius: 5px;
         margin: 16px 0;
      }

      blockquote p {
         padding: 15px;
      }

      cite {
      margin: 16px 32px;
         font-weight: bold;
      }
   </style>
</head>
<body>
   <blockquote contenteditable="true">
      <p>Edit this content to add your own quote</p>
   </blockquote>
   <cite contenteditable="true">-- Write your own name here</cite>
</body>
</html>

On running the above code, it will generate an output consisting of the text displayed on the webpage.

Example

Let’s see another example of the contenteditable attribute in the following HTML document.

<!DOCTYPE html>
<html>
<head>
   <title>contenteditable attribute</title>
   <style>
      body {
         text-align: center;
      }

      h1 {
         color: green;
      }
   </style>
</head>
<body>
   <h1>tutorialspoint</h1>
   <h2>Example of contenteditable attribute</h2>
   <p contenteditable="true">tutorialspoint India: A computer science portal for tutorials, article and, CS courses!</p>
</body>
</html>

When we run above code, the output window will pop up displaying the text on the webpage.

Example

In the following example, we are creating an HTML document and using the contenteditable attribute and its values, false and empty, as follows−

<!DOCTYPE html>
<html>
<head>
   <title>contenteditable attribute</title>
   <style>
      body {
         text-align: center;
      }

      h1 {
         color: green;
      }
   </style>
</head>
<body>
   <h1>tutorialspoint</h1>
   <h2>Example of contenteditable attribute</h2>
   <p contenteditable="false">tutorialspoint India: A computer science portal for tutorials, article and, CS courses!</p>
   <p contenteditable>You can edit this paragraph! </p>
</body>
</html>

On running the above code, the output window will pop up displaying the text on the webpage.

html_attributes_reference.htm
Advertisements