HTML5 за 10 минут

Ввод кнопки выделения текста полужирным


Пользователю можно разрешить выделять текст полужирным в редактируемом элементе <div>, причем так, чтобы сделать это было нетрудно. Для этого пользователю достаточно выделить форматируемый текст мышью и щелкнуть на кнопке Ж, как в обычном редакторе текста. А ваша задача — переслать команду выделения текста полужирным текущему HTML-доку менту.

Для пересылки команды выделения текста полужирным текущему HTML-документу служит функция JavaScript под названием execCommand (). Этой функции передаются следующие аргументы.

object.execCommand(sCommand [, bUserlnterface] [, vValue])

Ниже вкратце поясняется, что именно обозначают аргументы функции execCommand ().

•    Обязательный аргумент s Command — символьная строка, в которой указывается команда, пересылаемая на исполнение.

•    Необязательный аргумент bUserlnterface — логическое значение true или false, обозначающее одно из двух:

♦    отображать пользовательский интерфейс (логическое значение true);

♦    не отображать пользовательский интерфейс (логическое значение false);

•    Необязательный аргумент vValue обозначает присваиваемое значение.

В данном случае требуется переслать команду выделения текста полужирным, как показано в приведенной ниже строке кода, document.execCommand(bold, false, null);

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

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

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

<IDOCTYPE html>

<html>

<head>

<title>

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

</title>

</head>

<body>

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

<div>

</div>

<br>

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

</div>

</body>

</html>

3.   Введите выделенный ниже полужирным код для создания кнопки Ж и пересылки команды выделения текста полужирным при выборе этой кнопки.

<!DOCTYPE html>

<html>

<head>

<title>

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

</title>

</head>

<body>

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

<div>

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

</div>

<br>

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

</div>

</body>

</html>

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

Теперь пользователь может выделить текст и щелкнуть на кнопке Ж, чтобы отформатировать этот текст полужирным.

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