Что видим – то и получаем

eto'o

Хакер, номер #082, стр. 082-124-3

После этого рядом с функцией инициализации редактора нужно создать еще одну элементарную процедуру:

function setItalic() {

var range = editor.selection.createRange();

range.execCommand("Italic");

}

Теперь, если ты нажмешь на кнопку «I», выделенный текст станет наклонным. А что, если нажать на кнопку, не выделяя при этом текста? Ничего не произойдет, поскольку execCommand даже не будет выполняться для пустого Range. С другой стороны, было бы не плохо, наверное, чтобы в исходный код вставился определенный тэг оформления и данные, вводимые пользователем, помещались внутрь этого нового элемента. Для этого можно использовать такой трюк: если выделенная область пуста, помещать туда какой-то невидимый символ. Затем перемещаться на позицию назад и заключать это «пустое» содержимое в оформительский контейнер. Поэтому функцию setItalic() можно переписать следующим образом:

function setItalic() {

var range = editor.selection.createRange();

if (range.text.length == 0) {

range.pasteHTML(" ");

range.moveStart("character", -1);

range.select();

}

range.execCommand("Italic");

}

Обрати внимание на свойство range.text.length - как легко понять из приведенного кода, здесь находится длина выделенного текста. Соответственно, если ничего не выделено, то этот параметр равен нулю и мы вставляем в место, где находится курсор, пробел (  в unicode), перемещаемся на символ влево и производим выделение области, после чего применяем команду execCommand(Italic). Теперь, если пользователь начнет вводить текст после нажатия кнопки «I», он будет оформляться курсивом.

[веселые картинки]

Думаю, ты уже должен был догадаться, каким образом можно вставлять в документ картинки. Конечно, нам опять потребуется кнопка, на которую мы повесим обработчик insertImg:

gt;gt;

Сама функция выгладит примерно следующим образом:

function insertImg() {

var img = prompt("Веди имя", "file.jpg");

var range = editor.selection.createRange();

range.pasteHTML("gt;");

}

Эта процедура запрашивает у пользователя имя вставляемой картинки, а затем вставляет вместо выделенного текста (если выделение пустое, то просто на позицию курсора) html-тег gt;, соответствующий вставляемой картинки. Правда, проще простого? Думаю, для тебя не будет проблемой написать еще несколько функций, которые будут выделять текст жирным, или различными цветами. Если ты всерьез заинтересуешься этой темой, настоятельно рекомендую тебе обратиться к документации на сайте MSDN. Набрав в поиске How to Create an HTML Editor Application, ты сразу найдешь ссылку http://msdn.microsoft.com/library/default.asp?url=/workshop/author/editing/tutorials/html_editor.asp, по которой доступна прекрасная статья, описывающая процесс создания нехитрого визуального редактора. На этом сайте можно легко найти описание всех функций и методов, используемых для визуального редактирования. Если у тебя поганый интернет, ты так же можешь обратиться к нашему диску и получить всю требуемую документацию оттуда.