Html programming crash course (2015)

Chapter 5: Inline Editing

In this chapter, you will learn about inline editing, including:

• Getting to know inline editing

HTML5 allows you to make elements whose content can be easily edited by users; in fact, the whole document can be edited with much ease. By this, we do not refer to text fields. You can make all kinds of elements editable, including <div> elements.

In this section, we will attempt to create an editable <div> element which would allow a user to edit it. As soon as a user will click it, a text-insertion caret will appear, allowing the user to enter text.

Getting To Know Inline Editing

The following three attributes can be used with inline editing:

• designmode – makes specific HTML elements editable

• contenteditable – makes the entire document editable

• spellcheck – enables spellchecking

contenteditable

Supported by: Internet Explorer, Chrome, Opera, Safari, Firefox

The contenteditable attribute can be used in HTML5 to make certain elements editable. There are three settings for this attribute:

• True – makes content of element editable

• False - makes content of element not editable

• Inherit - makes attribute the same as the parent of the element

In order to allow a user to edit the <div> element, we will set contenteditable to true.

Example

In this example, we will work with the content editable attribute together with a <div> element to enable users to enter text in the <div> element.

1. Create a file called edit-div.html in a text editor of your choice.

2. Enter this code into the file:

<!DOCTYPE html>

<html>

<head>

<title>

Editable <div> Element

</title>

</head>

<body>

<h1>Editable <div> Element</h1>

</body>

</html>

3. To create a <div> element, and to set its contenteditable attribute to true, enter the following code:

<!DOCTYPE html>

<html>

<head>

<title>

Editable <div> Element

</title>

</head>

<body>

<h1>Editable <div> Element</h1>

<div id=”div” style=’border:solid

black; height: 300px; width: 400px’

contenteditable=”true”>

</div>

</body>

</html>

4. Save the file as text and open the HTML document to see the code in action.

designmode

Supported by: Internet Explorer, Chrome, Opera, Safari, Firefox

This is an attribute of an entire document and makes the whole document editable. There are two settings of this attribute:

• On – turns on the designmode, thereby allowing editing of the whole document

• Off – turns off the designmode, thereby preventing editing of the whole document

If you want to make your document editable, you will have to set the designmode attribute to ‘on’.

Example

To make the whole document editable, we will add the designmode attribute with a <iframe> floating frame. Therefore, instead of making just the <div> element editable, we will make the entire page contained in the <frame> editable.

Here’s how you can get started:

1. Create an edit-frame.html page using a text editor of your choice.

2. To create the <iframe> and this example, enter the code given below:

<!DOCTYPE html>

<html>

<head>

<title>

Editable <iframe>

</title>

</head>

<h1>Editable <iframe></h1>

black; height: 300px; width: 400px’

src=”about:blank”>

</iframe>

</body>

</html>

3. To turn on the designmode attribute, enter add this to the file:

<!DOCTYPE html>

<html>

<head>

<title>

Editable <iframe>

</title>

var iframe;

function loader()

{

iframe =

document.getElementById(“content”);

iframe.contentDocument.designMode = “on”;

}

window.addEventListener(“loader”, onload,

false);

</script>

</head>

<h1>Editable <iframe></h1>

black; height: 300px; width: 400px’

src=”about:blank”>

</iframe>

</body>

</html>

Save the file in text format. In this example, we created an <iframe> and turned its designmode attribute to on.

Adding Buttons

You can add buttons in the following way:

1. Open the edit-frame.html file in a text editor

2. To add buttons, add the code given below:

<!DOCTYPE html>

<html>

<head>

<title>

Editable <iframe>

</title>

var iframe;

function loader()

{

iframe =

document.getElementById(“content”);

iframe.contentDocument.designMode = “on”;

}

function showSource()

{

var content =

iframe.contentDocument.body.innerHTML;

content.replace(/</g, ‘<’);

content.replace(/>/g, ‘>’);

alert(content);

}

function createLink()

{

var url = prompt(“Enter URL:”, “http://”);

if (url)

iframe.contentDocument.execCommand

(“createlink”, false, url);

}

window.addEventListener(“loader”, onload,

false);

</script>

</head>

<h1>Editable <iframe></h1>

<div>

<input type=”button” value=”Bold” onclick=

“iframe.contentDocument.execCommand

(‘bold’, false, null);”>

<input type=”button” value=”Italic”

onclick=”iframe.contentDocument.execCommand

(‘italic’, false, null);”>

<input type=”button” value=”Underline”

onclick=”iframe.contentDocument.execCommand

(‘underline’, false, null);”>

<input type=”button” value=”Add Link”

onclick=”createLink();”>

<input type=”button” value=”Display Source”

onclick=”showSource();”>

</div>

<br>

black; height: 300px; width: 400px’

src=”about:blank”>

</iframe>

</body>

</html>

3. Save the file, making sure that it is not in any format other than text.

This example works in the same way as the previous one (edit-div.html) with the only exception being the user’s ability to edit the whole document contained in the <iframe>.

spellcheck

Supported by: Firefox

When editing the content of a specific element, such as <div> element, the web browser can allow you to spell check your content. There are two values of the spellcheck attribute:

• True – turns on spellchecking

• False – turns off spellchecking

Example

As of now, only Firefox supports the spellchecking attribute of HTML5. If Firefox, it is on by default.

You will see that any misspelled words are automatically underlined in Firefox, and can be corrected by right-clicking the word and choosing the correct word from the drop-down list.

Summary

HTML5 allows you to make elements whose content can be easily edited by users.

The following three attributes can be used with inline editing:

• designmode – makes specific HTML elements editable

• contenteditable – makes the entire document editable

• spellcheck – enables spellchecking