[ главная ]   [ рейтинг статей ]   [ справочник радиолюбителя ]   [ новости мира ИТ ]



Ответов: 0
25-02-12 07:01







   Web - программирование
PHP


ASP






XML



CSS

SSI





   Программирование под ОС











   Web - технологии








   Базы Данных









   Графика






Данные




Web - программирование / Java Script /

Пишем простейший WYSIWYG (визуальный редактор) на Javascript

Задача: написать простейший визуальный редактор и немного разобраться как он работает.

Что такое WYSIWYG?


WYSIWYG -
аббревиатура What You See Is What You Get. В переводе: "что вижу, то и получаю". В висивиге можно просматривать и редактировать HTML-содержимое не редактируя HTML-код. Наиболее близкая аналогия ВИСИВИГу - это текстовый процессор от Microsoft Word, с которым многие знакомы. В нем, чтобы поставить жирность или курсив, не нужно писать теги или другие элементы форматирования, достаточно просто нажать соотствующую функциональную кнопку.

Как это работает?


Для написания простого ВИСИВИГа не нужно изобретать велосипед, все средства уже встроены и успешно работают. Механизм работы большинства визуальных редакторов основан на свойстве designMode объекта document. Это встроенное свойство (к сожалению, далеко не для всех браузеров, но для большинства современных) как раз и позволяет редактировать HTML-контент. После его активанции (designMode='On') на web-страницу можно ставить привычный нам курсор и набивать, удалять или изменять форматирование контента.

Бывает удобно не редактировать всю страницу, а иметь какую-то фиксированную область, для чего используется iframe. Именно его объект document используется для активации свойства designMode.

Форматирование содержимого в пределах ВИСИВИГа осуществляется с помощью непростого метода execCommand, реализация которого сильно различается от браузера к браузеру.

Смотрим JavaScript-код для простейшего ВИСИВИГа:

Код JavaScript


// ***********************
// ШАГ 1: Выводим iframe и получаем доступ к нему
// ***********************

// Выводим в HTML-поток iframe
document.write("<iframe scrolling='no' frameborder='no' src='#' id='frameId' name='frameId'></iframe><br/>");
// Определим Gecko-браузеры, т.к. они отличаются в своей работе от Оперы и IE
var isGecko = navigator.userAgent.toLowerCase().indexOf("gecko") != -1;
// Получаем доступ к объектам window & document для ифрейма
var iframe = (isGecko) ? document.getElementById("frameId") : frames["frameId"];
var iWin = (isGecko) ? iframe.contentWindow : iframe.window;
var iDoc = (isGecko) ? iframe.contentDocument : iframe.document;

// ***********************
// ШАГ 2: Добавим на пустую страницу ифрейма произвольный HTML-код
// ***********************

// Формируем HTML-код
iHTML = "<html><head>\n";
iHTML += "<style>\n";
iHTML += "body, div, p, td {font-size:12px; font-family:tahoma; margin:0px; padding:0px;}";
iHTML += "body {margin:5px;}";
iHTML += "</style>\n";
iHTML += "<body><u>Содержимое</u> с <b>HTML</b>-<i>разметкой</i></body>";
iHTML += "</html>";
// Добавляем его с помощью методов объекта document
iDoc.open();
iDoc.write(iHTML);
iDoc.close();

// ***********************
// ШАГ 3: Инициализация свойства designMode объекта document
// ***********************

if (!iDoc.designMode) alert("Визуальный режим редактирования не поддерживается Вашим браузером");
else iDoc.designMode = (isGecko) ? "on" : "On";

// ***********************
// ШАГ 4: Простейшие элементы редактирования: жирность, курсив, подчеркивание
// ***********************

// Выведем HTML-код этих элементов
document.write("<input type='button' value='Ж' onclick='setBold()' class='bold' />");
document.write("<input type='button' value='К' onclick='setItal()' class='ital' />");
document.write("<input type='button' value='Ч' onclick='setUnder()' class='under' />");
// Запишем код функции, для выставления форматирования
// Используется метод execCommand объекта document
function setBold() {
iWin.focus();
iWin.document.execCommand("bold", null, "");
}
function setItal() {
iWin.focus();
iWin.document.execCommand("italic", null, "");
}
function setUnder() {
iWin.focus();
iWin.document.execCommand("underline", null, "");
}


Пример работы простейшего ВИСИВИГа

Замечение:

Данная версия визуального редактора не может работать в Опере ниже версии 9.01 и покажет предупреждение "Визуальный режим редактирования не поддерживается Вашим браузером". Работоспособность проверена в:
- IE 6;
- FF 1.5;
- Opera 9.01 +;
- Mozilla 1.7.2;
- NN 7.1 +;





Комментарии

 Ваш комментарий к данному материалу будет интересен нам и нашим читателям!



Последние статьи: Web - программирование / Java Script /

Живые меню или Как сделать красиво с помощью CSS и JavaScript
14-03-2009   

Наверное, никто не сможет поспорить с утверждением, что главное в любой web-страничке - удобство для пользователя. После того, как мы выложили наше творение в сеть, мы сразу начинаем предпринимать массу усилий для того, чтобы привлечь на свой сайт максимум посетителей... подробнее

Кол. просмотров: общее - 5493 сегодня - 0

Локальная баннерная система
14-03-2009   

Этот скрипт поможет вам организовать на своем сайте или страничке баннерную систему. Первый фрагмент вы вставляете в любое место странички... подробнее

Кол. просмотров: общее - 4655 сегодня - 0

Локальная реклама
14-03-2009   

В Internet Zone-154 была небольшая заметка Локальная баннерная система. Автор - Вадим Беляков (http://tuta.da.ru) предлагал поставить на страничку баннер, используя небольшой javascript. Я прочитал этот номер лишь в середине апреля. Мне сразу же пришло в голову использовать его для текстовой рекламы... подробнее

Кол. просмотров: общее - 5006 сегодня - 0

Использование JS для создания «умных» форм
14-03-2009   

JS, или JavaScript язык сценариев, которые выполняются на стороне клиента и не требует перезагрузки страницы. JavaScript был разработан компанией Netscape в 1995 году... подробнее

Кол. просмотров: общее - 4833 сегодня - 1

Обманщик спам-роботов
14-03-2009   

Как известно, бичом современного Интернета является спам - непрошенная рассылка рекламных и прочих сообщений. По данным некоторых аналитиков, он составляет более 50% всех сообщений в Сети... подробнее

Кол. просмотров: общее - 5016 сегодня - 1



  WWW.COMPROG.RU - 2009-2012 | Designed and Powered by Zaipov Renat | Projects