Прикручиваем TinyMCE 3.0.8 stable и Ajax file/Image manager V1.0 RC1 к SS

[Caurus]

Прикручиваем TinyMCE 3.0.8 stable и Ajax file/Image manager V1.0 RC1 к SS. Пришлось это делать из-за того что не устраивал FCKeditor глючно работал в Opere а хотелось именно там. Поэтому пришлось поставить TinyMCE.

Качаем приаттаченый файл, внутри архива уже есть TinyMCE 3.0.8 stable и Ajax file/Image manager V1.0 RC1 все Рус.

После этого распаковываем архив на свой сервак.

Далее начинается процесс прикрутки к SS.

1) Определяемся куда хотим вставить редактор. Возможных вариантов несколько:
а) В область редактирования описания категорий.
б) В область редактирования описания товаров.
в) В новости.
г) Я еще ставил себе мод статьи так что я прикручивал еще туда.

Еще необходимо правильно прописать пути до скриптов.

Для того что б находился TinyMCE в тех кодах которые вы будете вставлять нужно найти

src="tiny_mce/tiny_mce.js"

и заменить на свой путь.

Для Ajax file/Image manager менять путь надо только в части кода который мы вставляем в

\templates\backend\news.admin_list.tpl.html

там за это отвечает участок

url: "tiny_mce/plugins/ajaxfilemanager/ajaxfilemanager.php",

тут и надо менять.

И еще надо заменить пути для папки куда будут заливаться картинки искать надо в файле

/tiny_mce/plugins/ajaxfilemanager/inc/config.base.php

Отвечает за это 2 переменных

define('CONFIG_SYS_DEFAULT_PATH', './../../../uploads/'); //accept relative path only
define('CONFIG_SYS_ROOT_PATH', './../../../uploads/');	//accept relative path only

в моем случае путь выглядит так ./../../../uploads/ в вашем по другому наверное.

И еще для безопасности т.к. скрипт Ajax file/Image manager можно запустит напрямую пройдя до этой папки то лучше поставить защиту

Находим в файле config.base.php

define('CONFIG_ACCESS_CONTROL_MODE', false); 	
define("CONFIG_LOGIN_USERNAME", 'ajax');
define('CONFIG_LOGIN_PASSWORD', '123456');
define('CONFIG_LOGIN_PAGE', 'ajax_login.php'); //the url to the login page

Вставляем

define('CONFIG_ACCESS_CONTROL_MODE', '1'); 	
define("CONFIG_LOGIN_USERNAME", 'тут логин');
define('CONFIG_LOGIN_PASSWORD', 'тут пароль');
define('CONFIG_LOGIN_PAGE', 'ajax_login.php'); //the url to the login page

Итак для того что б прикрутить к категориям необходимо вставить вот этот код в category.php после

 $showSelectParametrsTable = $_GET["SelectParametrsHideTable_hidden"];
?>

Вставляем:

<script language="javascript" type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
		// General options
		mode : "none",
		theme : "advanced",
		force_br_newlines : true,
		height : "300",
		
		plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

		// Theme options
	theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
	theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
	theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
	theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
	theme_advanced_toolbar_location : "top",
	theme_advanced_toolbar_align : "left",
	theme_advanced_statusbar_location : "bottom",
	theme_advanced_resizing : true,
		language : "ru",

		// Example content CSS (should be your site CSS)
		content_css : "css/content.css",

		// Drop lists for link/image/media/template dialogs
		template_external_list_url : "lists/template_list.js",
		external_link_list_url : "lists/link_list.js",
		external_image_list_url : "lists/image_list.js",
		media_external_list_url : "lists/media_list.js",

		// Replace values for the template plugin
		template_replace_values : {
			username : "Some User",
			staffid : "991234"
		}
	});
	
	function toggleEditor(id) {
	if (!tinyMCE.getInstanceById(id))
		tinyMCE.execCommand('mceAddControl', false, id);
	else
		tinyMCE.execCommand('mceRemoveControl', false, id);
}
</script>

Далее в этом файле находим :

<textarea name="desc" rows=7 cols=22><?php echo str_replace("\"","&quot;",$d); ?></textarea>

Заменяем на:

<textarea id="desc" name="desc" rows=10 cols=80><?php echo str_replace("\"","&quot;",$d); ?></textarea><br>
			<a href="javascript:toggleEditor('desc');">Включить/Отключить визуальный редактор</a>

Вставляем в область редактирования описания товаров. В файл products.php после

window.moveTo(Math.floor(x),25);
}
</script>
</head>

Вставляем:

<script language="javascript" type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
		// General options
		mode : "none",
		theme : "advanced",
		force_br_newlines : true,
		height : "300",
		
		plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

		// Theme options
	theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
	theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
	theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
	theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
	theme_advanced_toolbar_location : "top",
	theme_advanced_toolbar_align : "left",
	theme_advanced_statusbar_location : "bottom",
	theme_advanced_resizing : true,
		language : "ru",

		// Example content CSS (should be your site CSS)
		content_css : "css/content.css",

		// Drop lists for link/image/media/template dialogs
		template_external_list_url : "lists/template_list.js",
		external_link_list_url : "lists/link_list.js",
		external_image_list_url : "lists/image_list.js",
		media_external_list_url : "lists/media_list.js",

		// Replace values for the template plugin
		template_replace_values : {
			username : "Some User",
			staffid : "991234"
		}
	});
	
	function toggleEditor(id) {
	if (!tinyMCE.getInstanceById(id))
		tinyMCE.execCommand('mceAddControl', false, id);
	else
		tinyMCE.execCommand('mceRemoveControl', false, id);
}
</script>

В этом файле находим

<textarea name="description" rows=15 cols=40><?php echo str_replace("<","&lt;",$product["description"]); ?></textarea>

Заменяем на:

<textarea id="description" name="description" rows=15 cols=50><?php echo str_replace("<","&lt;",$product["description"]); ?></textarea><br>
<a href="javascript:toggleEditor('description');">Включить/Отключить визуальный редактор</a>

Находим:

<textarea name="brief_description" rows=7 cols=40><?php echo str_replace("<","&lt;",$product["brief_description"]); ?></textarea>

Заменяем на:

<textarea id="brief_description" name="brief_description" rows=10 cols=50><?php echo str_replace("<","&lt;",$product["brief_description"]); ?></textarea><br>
<a href="javascript:toggleEditor('brief_description');">Включить/Отключить визуальный редактор</a>

Подключение в новости: заходим в \templates\backend\news.admin_list.tpl.html
Там находим участок

Obj.style.display = 'block'
		}
	}
</script>
{/literal}

После него вставим

{literal}
<script language="javascript" type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
		// General options
		mode : "none",
		theme : "advanced",
		force_br_newlines : true,
		width : "100%",
		height : "500",
		elements : "ajaxfilemanager",
		file_browser_callback : "ajaxfilemanager",
		
		plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

		// Theme options
	theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
	theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
	theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
	theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
	theme_advanced_toolbar_location : "top",
	theme_advanced_toolbar_align : "left",
	theme_advanced_statusbar_location : "bottom",
	theme_advanced_resizing : true,
		language : "ru",

		// Example content CSS (should be your site CSS)
		content_css : "css/content.css",

		// Drop lists for link/image/media/template dialogs
		template_external_list_url : "lists/template_list.js",
		external_link_list_url : "lists/link_list.js",
		external_image_list_url : "lists/image_list.js",
		media_external_list_url : "lists/media_list.js",

		// Replace values for the template plugin
		template_replace_values : {
			username : "Some User",
			staffid : "991234"
		}
	});
	
	function toggleEditor(id) {
	if (!tinyMCE.getInstanceById(id))
		tinyMCE.execCommand('mceAddControl', false, id);
	else
		tinyMCE.execCommand('mceRemoveControl', false, id);
}
	function ajaxfilemanager(field_name, url, type, win) {
			var ajaxfilemanagerurl = "tiny_mce/plugins/ajaxfilemanager/ajaxfilemanager.php";
			switch (type) {
				case "image":
					break;
				case "media":
					break;
				case "flash": 
					break;
				case "file":
					break;
				default:
					return false;
			}
            tinyMCE.activeEditor.windowManager.open({
                url: "tiny_mce/plugins/ajaxfilemanager/ajaxfilemanager.php",
                width: 900,
                height: 500,
                inline : "yes",
                close_previous : "no"
            },{
                window : win,
                input : field_name
            });
			}
</script>
{/literal}

Далее находим в этом файле

<textarea name='DATA[textToPublication]' cols=40 rows=10>{$NewsInfo.textToPublication}</textarea>

будет 2 вхождения и заменяем на это код в обоих случаях

 <textarea id='DATA[textToPublication]' name='DATA[textToPublication]' cols=40 rows=10>{$NewsInfo.textToPublication}</textarea><br>
				<a href="javascript:toggleEditor('DATA[textToPublication]');">Включить/Отключить визуальный редактор</a>

вроде все написал. Если будут проблемы пишите суда. У меня установлен и все работает. Основные проблемы были с Ajax file/Image manager... Не получалось правильно прописать путь до папки... Постоянно была ошибка. Но потом все получилось.

 

[omolota]

Извините, может это оффтопик, но я сам давно искал менеджер файлов для FCKEditor и TinyMCE и наткнулся на отличное решение Для просмотра ссылки Войди или Зарегистрируйся. Легко конфигурируется и настраивается. Возможно модератор поместит это сообщение в более подходящую тему.

 

[Caurus]

Реально круто..... И там есть загрузка напрямую с сылки.... без скачивания на комп... Спасибо... Хотя видон и него слабенький....

 

[soundman]

Спасибо автору, теперь можно работать в Safari! Это супер!!!
Но, вопрос такой- как сделать, чтоб по умолчанию редактор был включен, а не наоборот?

Заранее спасибо!

 

[Caurus]

Дело в том, что если по умолчанию включен, то он - редактор выпадает везде, где нужно и не нужно. Что б по умолчанию был включен, проделываем следующие действия:

1) находим во всех местах где мы вставляли

<script language="javascript" type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
		// General options
		mode : "none",
		theme : "advanced",
		force_br_newlines : true,
		height : "300",

и заменяем

mode : "none",

на

mode : "textareas",

тогда он показывается везде, но это не очень красиво, так как зачем нам лишняя захламленность окон, где нам этого не надо, например форма отправки письма покупателям она у большинства не переделана в html и зачем тогда там визуальный редактор.

Что б избавиться от лишнего делаем следующее:

1) добавляем в участок

<script language="javascript" type="text/javascript" src="tiny_mce/tiny_mce.js"></script> 
<script language="javascript" type="text/javascript"> 
tinyMCE.init({
		mode : "textareas",
		theme : "advanced",
		force_br_newlines : true,
		height : "300",

этот код

		editor_selector : "mceEditor",
		editor_deselector : "mceNoEditor",

получаем

<script language="javascript" type="text/javascript" src="tiny_mce/tiny_mce.js"></script> 
<script language="javascript" type="text/javascript"> 
tinyMCE.init({
		mode : "textareas",
		theme : "advanced",
		force_br_newlines : true,
		height : "300",
		editor_selector : "mceEditor",
		editor_deselector : "mceNoEditor",

далее добавляем везде, где нужен вывод редактора, следующий класс

class="mceEditor"

получаем

<textarea id='DATA[textToPublication]' name='DATA[textToPublication]' cols=40 rows=10 class="mceEditor">{$NewsInfo.textToPublication}</textarea><br>
				<a href="javascript:toggleEditor('DATA[textToPublication]');">Включить/Отключить визуальный редактор</a>

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

 

[yura]

а как быть с "дополнительными страницами"?

 

[Caurus]

to yura

Вставляем в самый верх файла

\templates\backend\conf_aux_pages.tpl.html

этот код

{literal}
<script language="javascript" type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
		// General options
		mode : "none",
		theme : "advanced",
		force_br_newlines : true,
		width : "100%",
		height : "500",
		elements : "ajaxfilemanager",
		file_browser_callback : "ajaxfilemanager",
		
		plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

		// Theme options
	theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
	theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
	theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
	theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
	theme_advanced_toolbar_location : "top",
	theme_advanced_toolbar_align : "left",
	theme_advanced_statusbar_location : "bottom",
	theme_advanced_resizing : true,
		language : "ru",

		// Example content CSS (should be your site CSS)
		content_css : "css/content.css",

		// Drop lists for link/image/media/template dialogs
		template_external_list_url : "lists/template_list.js",
		external_link_list_url : "lists/link_list.js",
		external_image_list_url : "lists/image_list.js",
		media_external_list_url : "lists/media_list.js",

		// Replace values for the template plugin
		template_replace_values : {
			username : "Some User",
			staffid : "991234"
		}
	});
	
	function toggleEditor(id) {
	if (!tinyMCE.getInstanceById(id))
		tinyMCE.execCommand('mceAddControl', false, id);
	else
		tinyMCE.execCommand('mceRemoveControl', false, id);
}
	function ajaxfilemanager(field_name, url, type, win) {
			var ajaxfilemanagerurl = "tiny_mce/plugins/ajaxfilemanager/ajaxfilemanager.php";
			switch (type) {
				case "image":
					break;
				case "media":
					break;
				case "flash": 
					break;
				case "file":
					break;
				default:
					return false;
			}
            tinyMCE.activeEditor.windowManager.open({
                url: "tiny_mce/plugins/ajaxfilemanager/ajaxfilemanager.php",
                width: 900,
                height: 500,
                inline : "yes",
                close_previous : "no"
            },{
                window : win,
                input : field_name
            });
			}
</script>
{/literal}

далее находим

	<textarea name="aux_page_text" cols="60" rows="15">{$aux_page.aux_page_text}</textarea>

заменяем на

<textarea id='aux_page_text' name="aux_page_text" cols="60" rows="15">{$aux_page.aux_page_text}</textarea> <br />
				<a href="javascript:toggleEditor('aux_page_text');">Включить/Отключить визуальный редактор</a>

готово, должно работать!

 

[denis-z]

Спасибо, супер!
Вот только у меня что то не так, наверно(

При загрузке изображения пишет:
Permission denied: session/ is not writable

И еще, как подключить css стили используемые на сайте к редактору?

 

[Caurus]

Спасибо, супер!
Вот только у меня что то не так, наверно(

При нажатии кнопки добавления изображения есть только url, а как сделать кнопку загрузить?

там около урла должна быть иконка на нее нажми и откроется Ajax file/Image manager, если ее нет или при открытии выпадет ошибка значит, ты неправильно указал путь до Ajax file/Image managerа смотри выше я про это писал...у меня с ним то ж не все сразу получилось.

А насчет css то делаем это следующим образом в коде который ты вставлял найди

// Example content CSS (should be your site CSS) 
        content_css : "css/content.css",

вот в этом участке и укажи путь до стилей

"css/content.css"

насчет сессий \tiny_mce\plugins\ajaxfilemanager\session\ на папку session поставь права 777 и должно быть ОК

И не меняй так быстро вопросы, а то подумаю, что у меня крыша поехала и я отвечаю на, то, что не спрашивали
....

 

[denis-z]

Урааа! Все работает