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

Тема в разделе "Shop-script", создана пользователем Caurus, 22 май 2008.

Модераторы: kadurinho
  1. Caurus

    Caurus

    Регистр.:
    21 фев 2008
    Сообщения:
    348
    Симпатии:
    285
    Прикручиваем 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... Не получалось правильно прописать путь до папки... Постоянно была ошибка. Но потом все получилось.
     

    Вложения:

    • jscripts.7z
      Размер файла:
      606,9 КБ
      Просмотров:
      213
    Gtvar, dvdiamond, smals и 25 другим нравится это.
  2. omolota

    omolota Создатель

    Регистр.:
    8 май 2008
    Сообщения:
    10
    Симпатии:
    2
    Извините, может это оффтопик, но я сам давно искал менеджер файлов для FCKEditor и TinyMCE и наткнулся на отличное решение Перейти по ссылке. Легко конфигурируется и настраивается. Возможно модератор поместит это сообщение в более подходящую тему.
     
    Caurus нравится это.
  3. Caurus

    Caurus

    Регистр.:
    21 фев 2008
    Сообщения:
    348
    Симпатии:
    285
    Реально круто..... И там есть загрузка напрямую с сылки.... без скачивания на комп... Спасибо... Хотя видон и него слабенький....:confused:
     
  4. soundman

    soundman Создатель

    Регистр.:
    4 сен 2006
    Сообщения:
    10
    Симпатии:
    1
    Спасибо автору, теперь можно работать в Safari! Это супер!!!
    Но, вопрос такой- как сделать, чтоб по умолчанию редактор был включен, а не наоборот?

    Заранее спасибо!
     
  5. Caurus

    Caurus

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

    1) находим во всех местах где мы вставляли
    PHP:
    <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",
    и заменяем
    PHP:
    mode "none",
    на
    PHP:
    mode "textareas",
    тогда он показывается везде, но это не очень красиво, так как зачем нам лишняя захламленность окон, где нам этого не надо, например форма отправки письма покупателям она у большинства не переделана в html и зачем тогда там визуальный редактор.

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

    1) добавляем в участок
    PHP:
    <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",
    этот код
    PHP:
            editor_selector "mceEditor",
            
    editor_deselector "mceNoEditor",
    получаем
    PHP:
    <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",
    далее добавляем везде, где нужен вывод редактора, следующий класс
    PHP:
    class="mceEditor"
    получаем
    PHP:
    <textarea id='DATA[textToPublication]' name='DATA[textToPublication]' cols=40 rows=10 class="mceEditor">{$NewsInfo.textToPublication}</textarea><br>
                    <
    a href="javascript:toggleEditor('DATA[textToPublication]');">Включить/Отключить визуальный редактор</a>
    теперь он по умолчанию включен и нет в ненужных местах визуального редактора.... Все должно работать, если что пиши!
     
    mariohs, SUZUKI и ndmitry нравится это.
  6. yura

    yura

    Регистр.:
    6 апр 2006
    Сообщения:
    437
    Симпатии:
    65
    а как быть с "дополнительными страницами"?
     
  7. Caurus

    Caurus

    Регистр.:
    21 фев 2008
    Сообщения:
    348
    Симпатии:
    285
    to yura

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

    Код:
    \templates\backend\conf_aux_pages.tpl.html
    этот код

    PHP:
    {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}
    далее находим

    PHP:
        <textarea name="aux_page_text" cols="60" rows="15">{$aux_page.aux_page_text}</textarea>
    заменяем на

    PHP:
    <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>
    готово, должно работать!
     
    rabidrabitt, mariohs, ndmitry и ещё 1-му нравится это.
  8. denis-z

    denis-z Создатель

    Регистр.:
    21 апр 2007
    Сообщения:
    25
    Симпатии:
    8
    Спасибо, супер!
    Вот только у меня что то не так, наверно(

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

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

    Caurus

    Регистр.:
    21 фев 2008
    Сообщения:
    348
    Симпатии:
    285
    там около урла должна быть иконка 1111.jpg на нее нажми и откроется Ajax file/Image manager, если ее нет или при открытии выпадет ошибка значит, ты неправильно указал путь до Ajax file/Image managerа смотри выше я про это писал...у меня с ним то ж не все сразу получилось.

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

    PHP:
    // Example content CSS (should be your site CSS) 
            
    content_css "css/content.css",
    вот в этом участке и укажи путь до стилей

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

    И не меняй так быстро вопросы, а то подумаю, что у меня крыша поехала и я отвечаю на, то, что не спрашивали
    ....:smmne:
     
    ndmitry и denis-z нравится это.
  10. denis-z

    denis-z Создатель

    Регистр.:
    21 апр 2007
    Сообщения:
    25
    Симпатии:
    8
    Урааа! Все работает:yahoo: