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

eto'o

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

gt;

Content

gt;

Теперь, чтобы превратить этот фрейм в полноценный редактор, нужно всего лишь выполнить элементарный код:

document.frames["editMe"].document.designMode = "On";

На практике инициализацию редактора удобно вынести в отдельную функцию, которую указать в качестве обработчика OnLoad в коренном документе.

Примерно вот так:

[инициализация редактора]

gt;

gt;gt;...gt;

gt;

var ed = null; #Глобальная переменная, указатель на наш редактор

function initEd() {

ed = document.frames["editMe"].document; #Получаем наш фрейм и присваиваем переменной editor указатель на него

ed.designMode = "On";#Включаем режим редактирования

ed.open();

ed.write("gt;Тестовая страницаgt;gt;gt;Синий, прекрасный текстgt;");#Записываем начальное содержимое

ed.close();

}

gt;

gt;

gt;...gt;

gt;

Если ты вставишь этот код в блокноте, сохранишь файл с расширением html и откроешь в браузере IE, то увидишь редактируемую область, куда можно будет легко добавлять текст, вводя его прямо с клавиатуры, как в обычном редакторе. Может, тебя это удивит - ведь до этого ты думал, что текстовое содержимое можно менять только в полях форм, а уж с iframe ничего такого не возможно. Но ведь нужно иногда удивляться, верно?

Еще больше восторга вызовет тот факт, что в этот фрейм можно будет легко вставлять все остальные элементы: изображения, гиперссылки, сложные фрагменты html и т.д. Более того, будет работать функция отмены изменений - undo. Кстати, она работает уже сейчас. Попробуй что-нибудь написать во фрейме и потом нажми ctrl+z - текст вернется в предыдущее состояние. Однако как обеспечить всю остальную функциональность нашего редактора? Очень просто: нужно добавить редактору несколько кнопочек, на каждую из которых повесить своего обработчика нажатия - функцию, которая будет выполнять требуемое действие. Ну, скажем, делать выделенный текст жирным, или зеленым.

Чтобы идти дальше, нам нужно разобраться еще с одним объектом - Range, содержащим выделенную область текста. У редактируемого объекта есть еще один объект selection, среди методов которого присутствует функция с говорящим названием: createRange. Да, именно она создает объект range, соответствующий выделенному в данный момент тексту: var range = editor.selection.createRange(). После этого уже можно работать с выделенным текстом при помощи execCommand, либо напрямую изменяя свойство range.text. Чтобы было понятнее, я покажу на примере, как создать и как вызывать функцию, которая будет оформлять выделенный кусок текста курсивом, или делать его, скажем, зеленым. Первым делом необходимо создать кнопку, по нажатии которой будет осуществляться определенное действие:

gt;gt;