<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>JSToolbox - все о JavaScript &#187; tinyMCE</title>
	<atom:link href="http://www.jstoolbox.com/category/tinymce/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.jstoolbox.com</link>
	<description>Блог о программировании вообще и о JavaScript в частности, уроки, статьи, заметки, база знаний.</description>
	<lastBuildDate>Wed, 28 Jul 2010 22:33:40 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Загрузка изображений в tinyMCE</title>
		<link>http://www.jstoolbox.com/2008/12/05/zagruzka-izobrazhenij-v-tinymce/</link>
		<comments>http://www.jstoolbox.com/2008/12/05/zagruzka-izobrazhenij-v-tinymce/#comments</comments>
		<pubDate>Thu, 04 Dec 2008 23:00:06 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[tinyMCE]]></category>
		<category><![CDATA[Плагины]]></category>
		<category><![CDATA[плагин]]></category>

		<guid isPermaLink="false">http://www.jstoolbox.com/?p=259</guid>
		<description><![CDATA[Недавно мне пришлось заниматься установкой и настройкой <a href="http://tinymce.moxiecode.com/" title="Редактор текста tinyMCE">tinyMCE</a> - мощного текстового редактора для веб сайтов. Однако, я совсем не предполагал, что столкнусь с проблемой добавления изображений в редактируемый текст. Как оказалось, в стандартной поставке tinyMCE есть только плагин, добавляющий изображения, которые уже загружены в какое-либо общедоступное место. То есть, можно указать ссылку, и tinymce добавит элемент <strong>&#60;img&#62;</strong> с этой ссылкой в документ. Однако заказчик проекта хотел загружать и управлять файлами изображений прямо из редактора, и его можно понять, ибо это очень неудобно - самостоятельно загружать изображения на сервер, а потом добавлять на них ссылку. После недолгих поисков мне удалось найти нужный мне плагин - <a href="http://j-cons.com/downloads/" title="Плагин для работы с изображениями в tinymce">ibrowser</a>, при помощи которого можно легко загружать файлы на сервер и управлять ими. Кроме того, этот плагин может работать не только с tinyMCE, но и с FCKEditor, HTMLArea и др.]]></description>
			<content:encoded><![CDATA[<p>Недавно мне пришлось заниматься установкой и настройкой <a href="http://tinymce.moxiecode.com/" title="Редактор текста tinyMCE">tinyMCE</a> &#8211; мощного текстового редактора для веб сайтов. Однако, я совсем не предполагал, что столкнусь с проблемой добавления изображений в редактируемый текст. Как оказалось, в стандартной поставке tinyMCE есть только плагин, добавляющий изображения, которые уже загружены в какое-либо общедоступное место. То есть, можно указать ссылку, и tinymce добавит элемент <strong>&lt;img&gt;</strong> с этой ссылкой в документ. Однако заказчик проекта хотел загружать и управлять файлами изображений прямо из редактора, и его можно понять, ибо это очень неудобно &#8211; самостоятельно загружать изображения на сервер, а потом добавлять на них ссылку. После недолгих поисков мне удалось найти нужный мне плагин &#8211; <a href="http://j-cons.com/downloads/" title="Плагин для работы с изображениями в tinymce">ibrowser</a>, при помощи которого можно легко загружать файлы на сервер и управлять ими. Кроме того, этот плагин может работать не только с tinyMCE, но и с FCKEditor, HTMLArea и др.</p>
<p><span id="more-259"></span></p>
<p>Теперь о том, как его установить и настроить.</p>
<p>1) Сначала <a href="http://j-cons.com/downloads/" title="Скачать ibrowser">скачайте ibrowser</a> и распакуйте дистрибутив в папку tiny_mce/plugins/ibrowser.</p>
<p>2) Затем, в файле конфигурации ibrowser/config.inc.php нужно указать на те директории, в которых будут храниться загружаемые файлы изображений:</p>
<pre class="prettyprint">
$cfg['ilibs'] = array (
	array (
		'value' => 'images/',
		'text' => 'Общие',
	),
	array (
		'value' => 'gallery/',
		'text' => 'Галерея',
	),
);
</pre>
</p>
<p>Для этих папок, а также для директорий ibrowser/scripts/phpThumb/cache и ibrowser/temp нужно установить права доступа 777, чтобы скрипт имел возможность записывать туда свои данные.</p>
<p>3) Далее нужно добавить скрипт tinyMCE и скрипт инициализации в веб страницу:</p>
<pre class="prettyprint">
&lt;script type="text/javascript" src="tiny_mce/tiny_mce.js">&lt;/script>
&lt;script type="text/javascript" src="tiny_mce_init.js">&lt;/script>
</pre>
<p>В файле <em>tiny_mce_init.js</em> я расположил код, который инициализирует редактор. Выглядит он следующим образом:</p>
<pre class="prettyprint">
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
});
</pre>
<p>Здесь указываются различные параметры настройки tinyMCE: внешний вид (скин), язык интерфейса, кнопки панели инструментов и прочее. В строке <em>plugins</em> перечислены плагины, которые необходимо использовать. Здесь я помимо прочих указал и <em>ibrowser</em>. Далее идет перечисление панелей инструментов и кнопок, которые будут там располагаться. Все это указывается в параметрах <em>theme_advanced_buttons*</em>, где цифра в конце указывает на номер ряда в панели инструментов. Кнопку, вызывающую диалоговое окно <em>ibrowser</em> я добавил в последний, четвертый ряд (theme_advanced_buttons4). В итоге, окно tinyMCE будет иметь следующий вид:</p>
<div class="entry_picture" style="width:453px"><img src="http://www.jstoolbox.com/wp-content/uploads/2008/12/ibrowser.png" alt="ibrowser" title="ibrowser" width="453" height="364" class="size-full wp-image-261" /></div>
<p>Если все выполнено правильно, то при нажатии на эту кнопку, откроется pop-up окно следующего содержания:</p>
<div class="entry_picture" style="width:500px"><img src="http://www.jstoolbox.com/blog/wp-content/uploads/2008/12/ibrowser-popup.png" alt="Окно плагина iBrowser" title="ibrowser-popup" width="500" height="359" class="size-full wp-image-264" /></div>
<p>Поскольку мне нужна была русифицированная версия плагина, то пришлось самому заняться локализацией. Переведенный мной файл можно скачать <a href="/download/ibrowser_ru.zip" title="Скачать локализацию для iBrowser">здесь</a>. Для русификации плагина, нужно скопировать файл локализации в папку /ibrowser/langs/, а затем в файле конфигурации config.inc.php установить переменную <strong>$cfg['lang']</strong> в значение <strong>ru</strong>. Исключением является окно приветствия, которое появляется сразу при открытии окна. Текст этого окна набран в файле <em>ibrowser.php</em>, так что либо переведите его сами, либо просто удалите, как это сделал я <img src='http://www.jstoolbox.com/blog/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> .</p>
<div class="postLinks">
<strong>Спонсор статьи</strong>:<br/>Продажа мотоциклов, снегоходов, квадроциклов, скутеров: <a href="http://auto.slando.ru/moscow/174_1.html">мотоциклы бу</a><br/>Московский свадебный портал &#8211; все о свадьбе в Москве: <a href="http://www.nevesta.info/">свадебный сайт</a><br/>Семья &#8211; женский портал Украины: <a href="http://wwwomen.com.ua/tags/%F1%E5%EC%FC%FF">семья</a>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.jstoolbox.com/2008/12/05/zagruzka-izobrazhenij-v-tinymce/feed/</wfw:commentRss>
		<slash:comments>15</slash:comments>
		</item>
	</channel>
</rss>
