There have been various ways and means for making content within websites editable for users and visitors, and with the advent of the contenteditable attribute, we can make web page document regions editable giving users another level of online interaction.

This article will review the foundation of the specification, and provide several examples of use in sample form, as well as a new browser address bar code that can turn your browser into a simple text editor similar to Notepad, which can then be saved and bookmarked.

The WhatWG specification which is linked above stipulates the following:

The contenteditable attribute is an enumerated attribute whose keywords are the empty string, true, and false. The empty string and the true keyword map to the true state. The false keyword maps to the false state. In addition, there is a third state, the inherit state, which is the missing value default (and the invalid value default).

The true state indicates that the element is editable. The inherit state indicates that the element is editable if its parent is. The false state indicates that the element is not editable.

Unlike designmode, which allows users to edit the entire web page document, contenteditable allows only specified elements to be editable. The contenteditable attribute is primarily envisioned to deliver an in-browser, rich-text user experience. Typically you will find this functionality in blog-based authoring tools like WordPress, Drupal or similar websites.

The contenteditable has three possible states:

  • contenteditable=”” or contenteditable=”true” which specifies that the element is editable.
  • contenteditable=”false”, which specifies that the element is not editable.
  • contenteditable=”inherit”, which specifies that the element is editable if its immediate parent element is editable. This is the default value.

The contenteditable feature does provision the same API as designmode for interacting with the editable element, therefore, the following command options are valid for interacting with the document (designmode) or element (contenteditable):

  • document.execCommand – Executes the given command.
  • document.queryCommandEnabled – Determines whether the given command can be executed on the document in its current state.
  • document.queryCommandIndeterm – Determines whether the current selection is in an in determined state.
  • document.queryCommandState – Determines whether the given command has been executed on the current selection.
  • document.queryCommandValue – Determines the current value of the document, range, or current selection for the given command.

Once the contenteditable attribute is added to an element the browser will cause that element to become editable. In addition, any children of that element will also become editable unless the child elements are clearly set to a contenteditable=”false”.

Now, let’s take a look at a code snippet highlighting an element set to the contenteditable attribute:

<section>
  <article>
    <p contenteditable="true">This is a basic example of the content editable attribute which is set within a paragraph element.</p>
  </article>
</section>

The above code example demonstrates the very basic addition of the contenteditable=“true” added to the paragraph <p> element. The sample content editable demonstration file index.html is displayed in Chrome Version 24.0.1312.57 m is shown in Figure A:

Now, let’s add some styling with the addition of a styles.css file with the following code snippet:

section {
       padding-top: 10px;
}
//*
[contenteditable="true"] {
        padding: 8px;
        outline: 2px double #FF6A6A;
        width: 500px;
        background-color: #F5F5F5;
}
[contenteditable="true"]:hover {
       outline: 2px double #0090D2;
       width: 500px;
       background-color: #DCE3E9;
}
p {
       font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
       font-size: 1em;
}

The CSS adds a 2 pixel outline border with a color of #FF6A6A to any element with contenteditable=“true” and includes a width of 500 pixels, and a background color set to #F5F5F5. On hover, the 2 pixel outline border changes color to a light blue set to #0090D2 with a background color of #DCE3E9 and width remaining at 500 pixels. And then I’ve added in another <article> element, which is set to contenteditable=“true” with several paragraphs as shown below:

<section>
       <article>
       <p contenteditable="true">This is a basic example of content the editable attribute set within the paragraph element.</p>
    </article>
       <article contenteditable="true">
       <p>All content contained in this <em>section</em> and <em>article</em> is editable within HTML5 supported browsers. <br /><br />
       Click anywhere within this area. <br /><br />
             Type your editable text here! </p>
    </article>
</section>

The resulting edits are displayed in Chrome Version 24.0.1312.57 within Figure B below where the cursor is hovering over the second article:

Figure B

“When can I use the contenteditable attribute“, displays the compatibility tables for support of the contenteditable attribute for desktop and mobile browsers.

The possibilities for enriching user experience with content editable regions within your web sites are only limited by the functionality and access you give to users on all levels. The index.html and styles.css files used in this demonstration are available for download.

Some more fun!

Did you know that for some more fun you can also make your entire browser window content editable? A recent post by Jose Jesus Perez Aguinaga on CoderWall revealed the URL that creates a notepad-like browser window. Just type the following into your browser address bar (IE has trouble with this): data:text/html, <html contenteditable>

Now you have a full window to add any content. You can even bookmark the page for future reference. An example in the basic form is displayed in Figure C as displayed in Chrome Version 24.0.1312.57:

Figure C

Jose explains that this works because it is using the Data URI format, which tells the browser to render content in HTML within the window as contenteditable. You can also use some simple editing tools as well, such as Ctrl+I for italics, Ctrl+B for bold, Ctrl+U for underline, which adds more functionality.

Several folks have taken it a step further and have created their own souped-up versions of the basic code. Take the “Editor Bookmarklet” that was posted by an anonymous guest on PasteBin, which renders the browser into the data text editor with fancy paper lines as shown in Figure D below:

Given the time and creativity I am sure that the variations on the browser window content editable theme are endless, where styles, functionality and display features can be manipulated to create your own customized browser text editor.