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

Недавно мне пришлось заниматься установкой и настройкой tinyMCE - мощного текстового редактора для веб сайтов. Однако, я совсем не предполагал, что столкнусь с проблемой добавления изображений в редактируемый текст. Как оказалось, в стандартной поставке tinyMCE есть только плагин, добавляющий изображения, которые уже загружены в какое-либо общедоступное место. То есть, можно указать ссылку, и tinymce добавит элемент <img> с этой ссылкой в документ. Однако заказчик проекта хотел загружать и управлять файлами изображений прямо из редактора, и его можно понять, ибо это очень неудобно - самостоятельно загружать изображения на сервер, а потом добавлять на них ссылку. После недолгих поисков мне удалось найти нужный мне плагин - ibrowser, при помощи которого можно легко загружать файлы на сервер и управлять ими. Кроме того, этот плагин может работать не только с tinyMCE, но и с FCKEditor, HTMLArea и др.

Теперь о том, как его установить и настроить.

1) Сначала скачайте ibrowser и распакуйте дистрибутив в папку tiny_mce/plugins/ibrowser.

2) Затем, в файле конфигурации ibrowser/config.inc.php нужно указать на те директории, в которых будут храниться загружаемые файлы изображений:

$cfg['ilibs'] = array (
	array (
		'value' => 'images/',
		'text' => 'Общие',
	),
	array (
		'value' => 'gallery/',
		'text' => 'Галерея',
	),
);

Для этих папок, а также для директорий ibrowser/scripts/phpThumb/cache и ibrowser/temp нужно установить права доступа 777, чтобы скрипт имел возможность записывать туда свои данные.

3) Далее нужно добавить скрипт tinyMCE и скрипт инициализации в веб страницу:

<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="tiny_mce_init.js"></script>

В файле tiny_mce_init.js я расположил код, который инициализирует редактор. Выглядит он следующим образом:

tinyMCE.init({
	mode : "exact",
	elements : "elm1,elm2,elm3,elm4,elm5",
	theme : "advanced",
	skin : "o2k7",
	language : "en",
	plugins : "safari,pagebreak,style,table,advimage,advlink,emotions,iespell,media,searchreplace,print,contextmenu,paste,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,inlinepopups,ibrowser",

	theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,forecolor,backcolor|,charmap,emotions,iespell,media,|,sub,sup",
	theme_advanced_buttons2 : "styleselect,formatselect,fontselect,fontsizeselect",
	theme_advanced_buttons3 : "cut,copy,paste,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,code",
	theme_advanced_buttons4 : "tablecontrols,|,hr,removeformat,visualaid,|,fullscreen,image,ibrowser",
	theme_advanced_toolbar_location : "top",
	theme_advanced_toolbar_align : "left",
	theme_advanced_statusbar_location : "bottom",
	theme_advanced_resizing : true,
	height:340
});

Здесь указываются различные параметры настройки tinyMCE: внешний вид (скин), язык интерфейса, кнопки панели инструментов и прочее. В строке plugins перечислены плагины, которые необходимо использовать. Здесь я помимо прочих указал и ibrowser. Далее идет перечисление панелей инструментов и кнопок, которые будут там располагаться. Все это указывается в параметрах theme_advanced_buttons*, где цифра в конце указывает на номер ряда в панели инструментов. Кнопку, вызывающую диалоговое окно ibrowser я добавил в последний, четвертый ряд (theme_advanced_buttons4). В итоге, окно tinyMCE будет иметь следующий вид:

Если все выполнено правильно, то при нажатии на эту кнопку, откроется pop-up окно следующего содержания:

Поскольку мне нужна была русифицированная версия плагина, то пришлось самому заняться локализацией. Переведенный мной файл можно скачать здесь. Для русификации плагина, нужно скопировать файл локализации в папку /ibrowser/langs/, а затем в файле конфигурации config.inc.php установить переменную $cfg['lang'] в значение ru. Исключением является окно приветствия, которое появляется сразу при открытии окна. Текст этого окна набран в файле ibrowser.php, так что либо переведите его сами, либо просто удалите, как это сделал я :).