HTML5 за 10 минут

Внутристраничное редактирование


Пример внутристрочного редактирования в элементе <iframe>

Далее вам предстоит применить на практике новый для HTML5 атрибут designmode, делающий редактируемым весь документ в плавающей рамке элемента <iframe>. Это даст пользователю возможность вводить и править текст документа в данном элементе, как показано на 5.8. С помощью атрибута designmode весь элемент <if rame> и любые включаемые в него элементы становятся редактируемыми. Таким образом, вместо отдельного элемента

<div> теперь редактированию подлежит весь документ, содержащийся в элементе <if rame>.

Как и в примере HTML-документа editdiv.html, в данном случае пользователь может щелкнуть на кнопках Ж, К и Ч, чтобы отформатировать выделенный текст полужирным, курсивом и подчеркиванием соответственно.

Для того чтобы приступить к созданию примера HTML-документа editiframe.html, выполните следующие действия.

1.   Создайте HTML-документ editiframe.html в любом редакторе текста, например в Windows WordPad.

2.   Введите приведенный ниже код основного тела HTML-документа, включая элемент <if rame>.

<1DOCTYPE html>

<html>

<head>

<title>

Редактируемый элемент &lt;iframe&gt;

</title>

</head>

cbody onload="loader()">

<hlРедактируемый элемент &lt;iframe&gt;</hl> ciframe id="content" style-border:solid black; height: ЗООрх; width: 500px src="about:blank">

</iframe>

</body>

</html>

3.   Введите выделенный ниже полужирным код для активизации атрибута designmode в элементе <if rame>.

<!DOCTYPE html>

<html>

<head>

<title>

Редактируемый элемент &lt;iframe&gt;

</title>

<script type="text/javascript"> var iframe; function loader()

{

iframe = document.getElementById("content");

}

window.addEventListener("loader", onload, false);

</script>

</head>

<body onload="loader()">

<hl Редактируемый элемент &lt;iframe&gt;</hl>

<iframe id="content" style=border: solid black; height: ЗООрх; width: 500px src="about:blank">

</iframe>

</body>

</html>

Сохраните внесенные изменения в файле editif rame. html. Сделайте это в текстовом формате. По умолчанию в текстовом редакторе WordPad выбирается расширенный текстовый формат RTF, непригодный для браузеров.

Итак, начало созданию примера HTML-документа editif rame. html положено. В нем был определен элемент <if rame> и активизирован его атрибут designmode. Далее вам предстоит ввести в этот HTML-документ кнопки форматирования текста.

Комментарии закрыты