HTML5 за 10 минут

Ввод кнопки для показа исходного текста


Когда пользователь завершит форматирование своего текста, ему можно разрешить просматривать его в окончательном виде

непосредственно в формате HTML после щелчка на кнопке Показать исходный текст. Так, если пользователь введет следующий текст: “Это пример выделения текста полужирным, курсивом и подчеркиванием. А это пример ввода ссылки.”, как показано на 5.5, то в формате HTML он будет выглядеть следующим образом.

Это пример выделения текста <span style="font-weight: bold;"> полужирным</зрап>, <span style="font-style: italic; "Журсивом </span>H <span style="text-decoration: underline;">подчеркива- нием</зрап>. А это пример ввода <a href="http://wine.ua"> ссылки</а>.

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

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

2.   Введите выделенный ниже полужирным код для создания кнопки Показать исходный текст и вызова функции showSource().

<!DOCTYPE html>

<html>

<head>

<title>

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

</title>

</head>

<body>

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

<div>

<input type="button" value="JK" onclick="document. execCommand (bold, false, null); "> <input type="button" value="K" onclick="document.execCommand (italic, false, null);"> <input type="button" value="4" onclick="document. execCommand(underline, false, null); "> <input type="button" value-Добавить ссылку" onclick="createLink();">

<input type="button" уа1ие="Показать исходный текст" onclick="showSource()?">

</div>

<br>

<div id="div" style-border:solid black; height: ЗООрх; width: 450px contenteditable="true">

</div>

</body>

</html>

3.   Введите выделенный ниже полужирным код JavaScript для чтения исходного текста в формате HTML из свойства innerHTML элемента <div> и последующего его вывода в диалоговом окне.

<1DOCTYPE html>

<html>

<head>

<title>

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

</title>

<script type="text/javascript"> function showSource()

{

var content = document.getElementById ("div").innerHTML; content, replace (/</g,&lt;); content.replace(/>/g, &gt;); alert(content);

}

function createLink()

{

var ur1 = prompt("Введите веб-адрес:", "http://"); if (url)

document.execCommand("createlink", false, url);

}

</script>

</head>

<body>

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

<div>

<input type-button" value- W onclick="document.execCommand(bold, false, null);">

<input type="button" value="K" onclick="document.execCommand (italic, false, null);"> <input type="button" value="4"

onclick="document. execCommand (underline, false, null); "> <input type="button" value-Добавить ссылку" onclick="createLink();">

</div>

<br>

<div id="div" style=borders solid black; height: ЗООрх; width: 450px contenteditable="trqe">

</div>

</body>

</html>

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

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