Студопедия
Случайная страница | ТОМ-1 | ТОМ-2 | ТОМ-3
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатика
ИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханика
ОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторика
СоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансы
ХимияЧерчениеЭкологияЭкономикаЭлектроника

Как сделать визуальный редактор на JavaScript

Читайте также:
  1. Frutti Loops Studio – популярный профессиональный редактор – секвенсор для написания музыки.
  2. JavaScript переменные
  3. Switch case в JavaScript
  4. В любой момент охоту можно будет отменить позвав отца. Это же нужно сделать, найдя домик убийцы.
  5. Валидность JavaScript
  6. Визуальный метод
  7. Встроенный wave редактор, beatslicer, публикация вашей работы

Наверняка, Вы много раз сталкивались с визуальными редакторами, позволяющими достаточно удобно формировать внешний вид страниц, либо каких-то сообщений, например, на форуме. Причём не с BB-кодами, а сразу получая конкретный результат. Этих редакторов достаточно много в Интернете. Один из самых популярных - это TinyMCE, однако, я сторонник собственных скриптов и считаю, что для каждой задачи должно быть своё решение, а не универсальное. Поэтому в этой статье я расскажу, как создать визуальный редактор на JavaScript.

Сразу привожу достаточно хорошо прокомментированный код:

<form name="myform" action="#" method="post" onsubmit="return save()">
<p>
<input type="hidden" id="content" name="content" value="" />
</p>
<script type="text/javascript">
// Вывод кнопок редактирования
document.write("<input type='button' value='B' onclick='setBold()' />");
document.write("<input type='button' value='I' onclick='setItal()' />");
document.write("<br />");
document.write("<iframe scrolling='no' frameborder='no' src='#' id='frameId' name='frameId'></iframe>"); // Добавляем iframe
/* В зависимости от браузера получаем доступ к созданному фрейму */
var isGecko = navigator.userAgent.toLowerCase().indexOf("gecko")!= -1;
var iframe = (isGecko)? document.getElementById("frameId"): frames["frameId"];
var iWin = (isGecko)? iframe.contentWindow: iframe.window;
var iDoc = (isGecko)? iframe.contentDocument: iframe.document;
/* Создаём код пустой HTML-страницы */
iHTML = "<html><head></head><body style='background-color: yellow;'></body></html>";
iDoc.open(); // Открываем фрейм
iDoc.write(iHTML); // Добавляем написанный код в фрейм
iDoc.close(); // Закрываем фрейм
iDoc.designMode = "on"; // Включаем режим редактирования фрейма
/* Функции для задания внешнего вида выделенного текста
Полный набор возможных команд: http://javascript.itsoft.ru/execcom/execCommands.html */
function setBold() {
iWin.focus();
iWin.document.execCommand("bold", null, "");
}
function setItal() {
iWin.focus();
iWin.document.execCommand("italic", null, "");
}
function save() {
/* Сохранение HTML-кода в поле hidden, чтобы потом можно было передать полученный HTML-код в скрипт-обработчик */
document.getElementById("content").value = iDoc.body.innerHTML;
return true;
}
</script>
<p>
<input type="submit" value="Отправить" />
</p>
</form>

На первый взгляд, кажется, что код очень сложный. И так оно и есть, но если рассмотреть его по базовым элементам, то ничего сложного нет. Есть обычная форма и поле hidden, куда сохраняется получившийся в редакторе HTML-код. Сам редактор - это обычный фрейм, то есть обычная HTML-страница, в которой мы можем писать текст (designMode = "on"). А различные форматирования создаются с помощью метода execCommand(), который выполняет указанную в параметре команду. А уж создать новые кнопки и прикрепить к ним аналогичные обработчики, думаю, что не составит для Вас труда.

В этом скрипте нет ничего лишнего, только самое главное и основное, и его можно брать за основу для создания собственного визуального редактора на JavaScript, в котором не будет ничего лишнего, а только то, что нужно Вам.

 

 


Дата добавления: 2015-10-31; просмотров: 251 | Нарушение авторских прав


Читайте в этой же книге: Объект Number в JavaScript | Объект Window в JavaScript | Объект Document в JavaScript | Объект Image в JavaScript | Проверка формы в JavaScript | Объект Object в JavaScript | События в JavaScript | Реализация таймера в JavaScript | Создание объектов в JavaScript | Валидность JavaScript |
<== предыдущая страница | следующая страница ==>
Отправка POST-запросов через JavaScript| Работа с cookie через JavaScript

mybiblioteka.su - 2015-2024 год. (0.007 сек.)