«Javascript Textarea HTML Editor»

«Javascript Textarea HTML Editor» - это миниатюрный и бесплатный JS-скрипт, с помощью которого вы можете создать на вашем сайте или блоге простой, но очень удобный визуальный HTML-редактор. Например, такой:

Javascript Textarea HTML Editor

Итак, что надо сделать, чтобы добавить такой редактор html-кода на ваш веб-ресурс?

А сделать надо следующее:

1.) Скачать, разархивировать и разместить на вашем интернет-ресурсе папку editor, в которой находится всё необходимое для работы HTML-редактор. Скачать можно или с оф. сайта, указанного в начале поста, или по этой ссылке - скачать.

2.) Модифицировать код на вашей веб-страничке. Например, так...

Код HTML:

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Javascript Textarea HTML Editor</title> <!-- подключаем JavaScript-код, отвечающий за работу визуального HTML-редактора на веб-странице --> <script type="text/javascript" src="editor/ed.js"></script> </head> <body> <!-- создаём простую форму для отправки сообщений --> <form action="myscript.php" method="post"> <label for="name">Ваше имя:</label><br/> <input id="name" name="name" type="text"/><br/> <label for="letter">Сообщение:</label><br/> <!-- создаём HTML-редактор для текстового поля (textarea), у которого идентификатор равен "letter" (id="letter") --> <script>edToolbar('letter'); </script> <textarea id="letter" name="letter" class="ed"></textarea><br/> <input value="Отправить сообщение" type="submit"/> </form> </body> </html>

Результат будет следующим - Демо.

Из всего приведённого выше HTML-кода нас должны заинтересовать только три строчки:

1.) Строчка, которая отвечает за подключение скрипта ed.js.

Код HTML:

<script type="text/javascript" src="editor/ed.js"></script>

Именно ed.js и является основой, ядром HTML-редактора.

2.) Строчка с html-кодом для текстового поля.

Код HTML:

<textarea id="letter" name="letter" class="ed"></textarea><br/>

Важно, чтобы у текстового поля был идентификатор (id) и класс (class). Идентификатор необходим для JavaScript-кода, отвечающего за работу html-редактора. А класс необходим, чтобы настроить внешний вид текстового поля с помощью CSS.

3.) Строчка, которая указывает, в каком месте веб-страницы вставить HTML-редактор и к какому текстовому полю данный редактор будет относится (ведь на одной странице может быть два и более таких текстовых полей).

Код HTML:

<script>edToolbar('letter'); </script>

Данный код приказывает создать редактор HTML-кода для текстового поля с идентификатором "letter" (то есть id="letter").

Как видите, всё невероятно просто. А главное - работает. Лично проверил в нескольких браузерах и проблем не обнаружил.

Есть и ещё одно преимущество у этого HTML-редактора - он легко модифицируется под ваши нужды и потребности. Так, например, можно изменить внешний вид кнопок. Для этого просто заменяем картинки с кнопками из папке editor/images на свои. А за стилевое оформление редактора отвечает файл styles.css. Кроме этого, редактор можно расширить и дополнить новыми HTML-тегами. У меня, например, получилось следующее:

Javascript Textarea HTML Editor

Вот и всё :-)

Автор: admin

Дата добавления: 2012-07-11

Просмотров: 5563

Рейтинг поста: +2-

Правила перепечатки

Социальные закладки:
Комментарии:
К данной заметке комментариев пока нет. Ваш комментарий может стать первым.
Добавить комментарий:







[ + ] помощь по форматирование текста

Идиот-тест

Если все обязательные поля (отмечены * ) заполнены необходимой информацией, то нажимаем кнопку Добавить комментарий.

Меню
Подписка
Рубрики
Метки
Последние комментарии
Рейтинг постов
Реклама
Друзья
География гостей
Статистика
Яндекс.Метрика