Визуальный Редактор на jQuery

Скачать Редактор

Версия 7.1.1, zip-архив, 123кб
  1. Введение
  2. Установка
  3. Настройки
  4. Подключение пользовательских стилей
  5. Набор кнопок (Тулбар)
  6. API
  7. Режим AIR
  8. Загрузка изображений
  9. Загрузка файлов
  10. Автосохранение
  11. Типограф

1Введение

Редактор написан на языке JavaScript с использованием библиотеки jQuery.

Редактор протестирован на Mac OS и Windows, в браузерах:

  • Firefox 3+
  • Safari 4+
  • Chrome 4+
  • Opera 10+
  • IE 7+

IE6 сознательно не поддерживается.

2Установка

Скачайте архив с Редактором и распакуйте в необходимую папку.

Убедитесь, что на странице подключена библиотека jQuery.

Теперь можно устанавливать Редактор. Для этого на странице разместите между тегами <head></head> такой код:

<script type="text/javascript" src="/js/redactor.js"></script>
<link rel="stylesheet" href="/js/css/redactor.css" type="text/css" />

Не забудьте поменять путь к файлам.

Теперь вызываем Редактор, например так:

<script type="text/javascript">
	$(document).ready(
		function()
		{
			$('#redactor_content').redactor();
		}
	);
</script>	
 

Этот код можно тоже разместить между тегами <head></head> или в любом другом месте страницы.

Теперь осталось поместить на страницу элемент <textarea> с ID "redactor_content" или любым другим ID, этот элемент и будет заменен редактором:

<textarea id="redactor_content" name="redactor_content" style="width: 100%; height: 320px;">

3Настройки

Настройка Значение Описание
air true или false Включение режима AIR. По умолчанию false.
focus true или false Устанавливает фокус на конкретный Редактор, особенно полезно, когда на странице несколько Редакторов. По умолчанию false.
resize true или false Включение и отключение изменения высоты Редактора. По умолчанию false.
toolbar по умолчанию "main" Указание, какой именно тулбар должен отобразиться в этом Редакторе. Возможные значения: false, main, mini
image_upload например: upload.php Путь к файлу загрузки изображений.
imageUploadFunction function Функция вызываемая после загрузки изображений.
typo по умолчанию false Путь к типографу, например: "/tests/typo.php"
lang по умолчанию "ru" Язык интерфейса редактора, возможные значения: ru, en, fr, ua, pt_br, pl
autosave по умолчанию false Включение автосохранения. Для ключения необходимо указать путь к файлу, который будет принимать данные редактора. Например: http://site.name/save.php
interval по умолчанию "60" Интервал автосохранения в секундах.
autoclear по умолчанию true Включение автоматической очистки от мусорных тегов и стилей MS Word и прочих программ, при вставке в Редактор.
autoformat по умолчанию true Если включено Редактор автоматически разбивает текст на параграфы.
overlay по умолчанию true Отображения затемненного слоя при вызове модальных окон Редактора.
remove_classes по умолчанию false Удаление классов у тегов в тексте
remove_styles по умолчанию true Удаление стилей у тегов в тексте.
convert_links по умолчанию true Автоматическое преобразование ссылок в тексте редактора.
init_clear по умолчанию false Очистка HTML кода от мусора при инициализации редактора
file_upload Путь к обработчику загружаемых файлов. Например: "/tests/file.php"
file_download Путь к обработчику скачиваемых файлов. Например: "/tests/file.php?file=". GET переменная "file=" - обязательно в конце запроса, т.к. в конец запроса автоматически подставится ID файла.
file_delete Путь к обработчику удаления файлов. Например: "/tests/file.php?delete=". GET переменная "delete=" - обязательно в конце запроса, т.к. в конец запроса автоматически подставится ID файла.
fileUploadFunction function Функция вызываемая после загрузки файлов.

Чтобы запустить Редактор с параметрами, необходимо их вызвать, например так:

<script type="text/javascript">
	$(document).ready(
		function()
		{
			$('#redactor_content').redactor({ focus: true, toolbar: 'mini', image_upload: '/modules/image_upload.php' });
		}
	);
</script>

4Подключение пользовательских стилей

Пример вызова:

$('#redactor_content').redactor({
	pathCss: '/path/to/css/',	
	css: ['style1.css','./style2.css','../other_css/style3.css','/path/to/another/css/style4.css']
});
  • opts.path имеет значение по умолчанию = ''
  • если opts.path == '', то идет определение по redactor.js
  • opts.pathCss по умолчанию имеет значение = 'css/'
  • если opts.pathCss начинается не с "/", то в начало добавляется opts.path
  • opts.css по умолчанию - ['wym.css']
  • если путь у стиля начинается не с "/", то в начало добавляется opts.pathCss

5Набор кнопок (Тулбар)

Редактор поставляется с тремя тулбарами: обычный, классический и минимальный. Все тулбары хранятся в виде отдельных файлов в папке редактора toolbars.

Можно создавать несколько наборов тулбаров на разные случаи жизни. Для этого необходимо по аналогии с уже имеющимися тулбарами отредактировать наборы кнопок.

После этого при вызове Редактора, необходимо указать какой именно тулбар будет отображен, например так:

<script type="text/javascript">
	$(document).ready(
		function()
		{
			$('#redactor_content').redactor({ toolbar: 'custom' });
		}
	);
</script>

Тулбар можно отключить, вот так:

<script type="text/javascript">
	$(document).ready(
		function()
		{
			$('#redactor_content').redactor({ toolbar: false });
		}
	);
</script>

6API

Чтобы получить внешний доступ к функциям Редактора, его необходимо при запуске поместить в объект, например так:

<script type="text/javascript">
	var redactor;
	$(document).ready(
		function()
		{
			redactor = $('#redactor_content').redactor();
		}
	);
</script>

Теперь можно вызывать функции объекта и производить необходимые манипуляции с редактором:

Функция Пример Описание
execCommand redactor.execCommand('inserthtml', 'произвольный html код'); Функция передачи параметров в визуальный фрейм.
Полный список команд.
setHtml redactor.setHtml('code'); Установить произвольный код в визуальный фрейм.
getCode var code = redactor.getCode(); Получить код (если Редактор в визуальном режиме, будет получен код из фрейма, если в режиме HTML то, будет получен код из textarea).
getHtml var html = redactor.getHtml(); Получить код из фрейма.
focus redactor.focus(); Установка фокуса в поле редактора.
destroy redactor.destroy(); Выключение редактора и превращение его обратно в textarea

7Режим AIR

В редактор можно включить специальный режим, при котором тулбар будет появляться из воздуха: демонстрация.

Тулбар появляется при выделении участка текста. Тулбар для режима AIR, можно настроить также как и обычный набор кнопок.

А вот так можно запустить редактор в режиме AIR:

<script type="text/javascript">
$(function()
{
	$('#redactor').redactor({ air: true });
});
</script>		
 

8Загрузка изображений

Javascript не позволяет реализовать загрузку изображений, поэтому эта возможность реализуется с помощью серверных языков программирования, например, PHP.

Прежде всего необходимо убедиться, что в Редакторе настроен путь к файлу загрузки, это можно сделать изменив настройку image_upload Редактора в файле redactor.js или указав параметр при запуске, например так:

<script type="text/javascript">
	$(document).ready(
		function()
		{
			$('#redactor_content').redactor({ image_upload: '/modules/upload.php' });
		}
	);
</script>

Итак, предположим, что файл upload.php будет обрабатывать изображения, его код может выглядеть так:

<?php
 
// директория хранения файлов
$dir = '/home/web/sitecom/redactor/images/';
 
$_FILES['file']['type'] = strtolower($_FILES['file']['type']);
 
if ($_FILES['file']['type'] == 'image/png' 
|| $_FILES['file']['type'] == 'image/jpg' 
|| $_FILES['file']['type'] == 'image/gif' 
|| $_FILES['file']['type'] == 'image/jpeg'
|| $_FILES['file']['type'] == 'image/pjpeg')
{	
	// даем файлу загадочное имя и копируем
	copy($_FILES['file']['tmp_name'], $dir.md5(date('YmdHis')).'.jpg');
 
	// отображаем файл
	echo '/tmp/images/'.md5(date('YmdHis')).'.jpg';
}
 
?>

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

Отправляя загруженный файл на сервер, можно задать функцию callback:

<script type="text/javascript">
$(document).ready(
	function()
	{
		$('#redactor_content').redactor({ 
			image_upload: '/modules/upload.php',
			imageUploadFunction: function()
			{
				alert(1);
			}
		 });
	}
);
</script>

9Загрузка файлов

Смотрите пример в комплекте редактора.

10Автосохранение

<script type="text/javascript">
	$(document).ready(
		function()
		{
			$('#redactor_content').redactor({ autosave: '/save.php', interval: 120 });
		}
	);
</script>

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

11Типограф

Текст редактора можно оттипографить. Для этого редактор нужно запустить с настройкой, указывающий на типограф:

<script type="text/javascript">
var redactor_obj;
$(function()
{
	redactor_obj = $('#redactor').redactor({ typo: '/typo.php' });
});
</script>

После чего по событию нажатой кнопки или иным путем, вызываем функцию:

redactor_obj.typo();

HTML код редактора отправиться в типограф и вернется красивым и оттипографированным.

Важно! В комплекте редактора поставляется типограф, но он сделан лишь для примера. Вы можете использовать любой другой.