«Javascript Textarea HTML Editor»

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

Итак, что надо сделать, чтобы добавить такой редактор 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-тегами. У меня, например, получилось следующее: