Замена стандартного менеджера файлов

free · 11 квітня 2011

Привет всем.

Решил поделиться с вами как заменить стандартный менеджер изображений на eilfinder. Сразу оговорюсь менеджер не встроен в редакторы контента CKEditor ( TyniMCE ) на офиц. сайте elfinder есть примеры как это сделать. Сам опенкарт мне пришлось достаточно много и упорно покромсать (это продолжается и по сей день) и слепить из него некий каталог, и меня очень напрягало добавление картинок к продукту, когда их число превышало 10, поэтому и появился этот пост ).

И так.

Сам elfinder вы можете посмотреть/слить на офц. сайте (см. выше), там же есть демо его работы. Я же приаттачил архивчег со своими настройками. Сам я не особо шарю в PHP, javascript, поэтому снимаю с себя ответственность за оптимальность решения и кода, все делалось методом научного тыка.

!!! Все изменения мы будем производить для админ части, поэтому чтобы не писать длинные пути, все файло считать лежащим относительно этого www/admin/....

начнем.

1. Для начала копируем elfinder в каталог нашего шаблона view/javascript (я сделал так, не спрашивайте почему.) И производим настройку заходим в файл elfinder\connectors\php\connector.php и правим

'root'            => '/home/root/www/image/data/',    // path to root directory (полный путь)
'URL'             => 'http://localhost/image/data/', // root directory URL (путь до каталога с картинками)

Также там еще туева хуча настроек, можете о них почитать на оф. сайте.

2. в файле view/template/common/header.tpl прописываем juery (если ее еще не было) и библиотеки elfinder.

<script src="view/javascript/elfinder/js/jquery-1.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="view/javascript/elfinder/js/ui-themes/base/ui.all.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="view/javascript/elfinder/css/elfinder.css" type="text/css" media="screen" title="no title" charset="utf-8">


<script src="view/javascript/elfinder/js/jquery-ui-1.7.2.custom.min.js" type="text/javascript" charset="utf-8"></script>
<script src="view/javascript/elfinder/js/elfinder.min.js" type="text/javascript" charset="utf-8"></script>
<script src="view/javascript/elfinder/js/i18n/elfinder.ru.js" type="text/javascript" charset="utf-8"></script>

3. Дальше идет некий изврат, но после 2х дней ковыряния в коде, и нескольких банок энергетика, мне в голову ничего не пришло (если у кого будут более здравые мысли, прошу делиться... ), так вот лезем в файл контролера controller/common/filemanager.php и вместо функции Image() делаем 2 функции )

public function image() {
		$this->load->model('tool/image');
		
		if (isset($this->request->post['image'])) {
		
			$tmp = explode("data/",$this->request->post['image']);
		
			$this->response->setOutput($this->model_tool_image->resize("data/".$tmp[1], 100, 100));

		}
	}
	
	public function short_path() {

		$tmp = explode("data/",$this->request->post['image']);
		
		$this->response->setOutput("data/" . $tmp[1]);
			
	}

Дальше поясню зачем все это.

4. Последний шаг. Идем в шаблон нашей админке, там где мы правим товары view/template/catalog/product_form.tpl и гдето внизу ищем JS функцию

function image_upload(field, preview)

меняем ее на следующую.

function image_upload(field, preview) {
		
		
			$('<div id="elfinder" />').elfinder({
					url : 'view/javascript/elfinder/connectors/php/connector.php',
					lang : 'ru',
					rememberLastDir : true,
					contextmenu : {
						cwd : ['reload', 'delim', 'mkdir', 'mkfile', 'upload', 'delim', 'paste', 'delim', 'info'], 
						file : ['select', 'open', 'delim', 'copy', 'cut', 'rm', 'delim', 'duplicate', 'rename'], 
						group : ['copy', 'cut', 'rm', 'delim', 'archive', 'extract', 'delim', 'info'] 
					 },
										
					dialog : { title : 'File manager', width : 500, modal : true },
					editorCallback : function(url) {
					
					var tmp_img = ''; 
					
					// получение короткого пути
						$.ajax({
							url: 'index.php?route=common/filemanager/short_path',
							type: 'POST',
							data: 'image=' + url,
							dataType: 'text',
							async: false,
							success: function(data) {
								tmp_img =  data;
								//alert('Short: ' + tmp_img);
							}
						});
							
					
					// получаем путь до картинки
						$.ajax({
								url: 'index.php?route=common/filemanager/image',
								type: 'POST',
								data: 'image=' + url,
								dataType: 'text',
								success: function(data) {
								
									$('#' + preview).replaceWith('<img src="' + data + '" alt="" id="' + preview + '" style="border: 1px solid #EEEEEE;" />');

								//	alert(tmp_img);
									
									$('#' + field).val(tmp_img);
								}
							});

					},
					closeOnEditorCallback : true
				});
				
	
};

Теперь немного поясню, про контролер из п.3

функция Short_path, рвет строку на части, когда находит data/ и возвращает мне короткий путь до файла картинки, другого способа мой мозг не выдал (((. т.к. elfinder выдает полный путь, вот и приходится его резать.

Под какой же принцип переделана и функция Image.

Теперь по JS в п.4 юзаю 2-е аякс функции, одна как раз находит Short_path, котороый потом пишется в value элемeнта <input>, ну а 2-ая функция генерит preview при помощи функции image.

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

Надеюсь кому нибудь пригодится, сие творений )))) . Ну а кто может все это дело оптимизировать и упростить, прошу не молчать)

elfinder.zip

akanext · 11 квітня 2011

кто тестил? стоит ставить? баги есть?

free · 13 квітня 2011

Нашел интересную доработку для elfinder, дял мультизагрузки файлов http://dapmoed.ru/2011/01/17/html5-multiupload-files-elfinder/

1. Копируем архив, из стать (см. выше)

2. в файле view/template/common/header.tpl добавляем к тому что описано выше еще пару строк.

<link rel="stylesheet" href="view/javascript/elfinder/css/fileuploader.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script src="view/javascript/elfinder/js/fileuploader.js" type="text/javascript" charset="utf-8"></script>

3. Меняем в этом же файле строчку

<script src="view/javascript/elfinder/js/elfinder.min.js" type="text/javascript" charset="utf-8"></script>

на

<script src="view/javascript/elfinder/js/elfinder.full.js" type="text/javascript" charset="utf-8"></script>

На сайте у меня работает http://moiotdyh.ru/dev/elfinder-demo/, на локальной машине не получилось привести в работоспособность (использую denwer). У кого получится, делитесь плиз.

tuzhilkin · 13 квітня 2011

Установил на последнюю версию ocStore 0.1.7

Выбираю изображение и вижу следующую картину:

Вместо изображения еще раз инклудится админка и снизу код

" alt="" id="preview3" style="border: 1px solid #EEEEEE;" />

Из за чего такое могло произойти?

Мультиселект еще не подключал.

free · 13 квітня 2011

я ставил на Opencart 1.4.7. Сейчас посмотрю что там в ocStore 0.1.7

free · 14 квітня 2011

все разобрался, в этой версии используются token-ы для безопасности.

если короче то в файле view/template/catalog/product_form.tpl, для функции function image_upload(field, preview) меняем 2 строчки

1.

url: 'index.php?route=common/filemanager/short_path'

на

url: 'index.php?route=common/filemanager/short_path&token=<?php echo $token; ?>'

2.

url: 'index.php?route=common/filemanager/image',

на

url: 'index.php?route=common/filemanager/image&token=<?php echo $token; ?>'

после этого все должно работать.

Yesvik · 14 квітня 2011

функция Short_path, рвет строку на части, когда находит data/ и возвращает мне короткий путь до файла картинки, другого способа мой мозг не выдал (((. т.к. elfinder выдает полный путь, вот и приходится его резать.

А опция cutUrl с ключевым словом root не спасает?

cutURL указывает какую подстроку от начала URL файла необходимо отрезать до передачи значения в editorCallback. Может содержать часть урла, пустую строку или ключевое слово root - отрезать корневой URL

sticker · 15 квітня 2011

все разобрался, в этой версии используются token-ы для безопасности.

если короче то в файле view/template/catalog/product_form.tpl, для функции function image_upload(field, preview) меняем 2 строчки

1.
url: 'index.php?route=common/filemanager/short_path'
на
url: 'index.php?route=common/filemanager/short_path&token=<?php echo $token; ?>'
2.
url: 'index.php?route=common/filemanager/image',
на
url: 'index.php?route=common/filemanager/image&token=<?php echo $token; ?>'
после этого все должно работать.

пропали вкладки, теперь все одним длинным списком в редактировании товара.

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

upd. проблемы решились:

1. Вкладки.

2. в файле view/template/common/header.tpl прописываем juery (если ее еще не было) и библиотеки elfinder.

<script src="view/javascript/elfinder/js/jquery-1.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="view/javascript/elfinder/js/ui-themes/base/ui.all.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="view/javascript/elfinder/css/elfinder.css" type="text/css" media="screen" title="no title" charset="utf-8">


<script src="view/javascript/elfinder/js/jquery-ui-1.7.2.custom.min.js" type="text/javascript" charset="utf-8"></script>
<script src="view/javascript/elfinder/js/elfinder.min.js" type="text/javascript" charset="utf-8"></script>
<script src="view/javascript/elfinder/js/i18n/elfinder.ru.js" type="text/javascript" charset="utf-8"></script>

должно быть ДО строчки

<script type="text/javascript" src="view/javascript/jquery/tab.js"></script>

иначе вкладки развалятся на 1 длинную страницу.

2. Превьюшки

Почему-то автоматически не выбиралась библиотека графическая, поэтому в elfinder\connectors\php\connector.php пришлось прописать ручками GD:

'imgLib'       => 'gd',       // image manipulation library (imagick, mogrify, gd)

3. Как сделать, чтобы выводимое окно эльфайндера было заданного размера?

Почитал все внимательно еще ращ, потыкал в firebug, и нашел ответ выше на этой странице ))):

view/template/catalog/product_form.tpl

dialog : { title : 'File manager', width : 500, modal : true },

width : 500

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

tuzhilkin · 15 квітня 2011

все разобрался, в этой версии используются token-ы для безопасности. если короче то в файле view/template/catalog/product_form.tpl, для функции function image_upload(field, preview) меняем 2 строчки1.
url: 'index.php?route=common/filemanager/short_path'
на
url: 'index.php?route=common/filemanager/short_path&token=<?php echo $token; ?>'
2.
url: 'index.php?route=common/filemanager/image',
на
url: 'index.php?route=common/filemanager/image&token=<?php echo $token; ?>'
после этого все должно работать.

Сделал как написано, и теперь не появляется выбранная картинка. Но после сохранения и просмотра этого товара они видны.

--> -->

Можно это как то исправить?

sticker · 15 квітня 2011

Сделал как написано, и теперь не появляется выбранная картинка. Но после сохранения и просмотра этого товара они видны.

--> -->

Можно это как то исправить?

аналогично + после добавления css и скриптов в хидер пропало верхнее горизонтальное меню в админке, ушло целиком в display 0

есть варианты это вылечить?

free · 17 квітня 2011

За превьюшку отвечает этот код

$('#' + preview).replaceWith('<img src="' + data + '" alt="" id="' + preview + '" style="border: 1px solid #EEEEEE;" />');

возможно ajax запрос возвращает неверные данные.

Проверить можно открыв консоль firebug в firefox или вывести путь alert - ом для проверки

       // получаем путь до картинки
        $.ajax({
            url: 'index.php?route=common/filemanager/image',
            type: 'POST',
            data: 'image=' + url,
            dataType: 'text',
            success: function(data) {
              $('#' + preview).replaceWith('<img src="' + data + '" alt="" id="' + preview + '" style="border: 1px solid #EEEEEE;" />');

                 alert(data);
                                                                        
               $('#' + field).val(tmp_img);
            }
         });

Если data возвращается не верно, значит проблема в контроле /admin/controller/common/filemanager.php . в функции image

SooR · 19 квітня 2011

Интересно, спасибо за вариант замены стандартного. Давно подумываю это сделать, написал более быстрый способ мультизагрузки изображений, отдельно можно прикрутить гулялку по папкам. Если будет время, займусь.

sticker · 20 квітня 2011

За превьюшку отвечает этот код
$('#' + preview).replaceWith('<img src="' + data + '" alt="" id="' + preview + '" style="border: 1px solid #EEEEEE;" />');
возможно ajax запрос возвращает неверные данные.
Проверить можно открыв консоль firebug в firefox или вывести путь alert - ом для проверки
       // получаем путь до картинки
        $.ajax({
            url: 'index.php?route=common/filemanager/image',
            type: 'POST',
            data: 'image=' + url,
            dataType: 'text',
            success: function(data) {
              $('#' + preview).replaceWith('<img src="' + data + '" alt="" id="' + preview + '" style="border: 1px solid #EEEEEE;" />');

                 alert(data);
                                                                        
               $('#' + field).val(tmp_img);
            }
         });
Если data возвращается не верно, значит проблема в контроле /admin/controller/common/filemanager.php . в функции image

возможно не работает из-за токенов?

дата показывает ссылку на изображение, вроде все ок. Что еще можно посмотреть

free · 21 квітня 2011

как токены для ostore 0.1.7 прикрутить я писал выше.

судя по скрину у tuzhilkin у него пустой src в <img>

у меня на выходе получается след. код для preview:

<td>
<input type="hidden" name="image" value="data/apple_cinema_30.jpg" id="image">
<img src="http://localhost/ostore/image/cache/data/apple_cinema_30-100x100.jpg" alt="" id="preview" style="border: 1px solid #EEEEEE;">
</td>

input заполняется для передачи значения value через $_POST, для этого использется код

$('#' + field).val(tmp_img);

а <img src= заполняется тем что писал выше ('#' + preview).replaceWith

1. покажите ваш код admin/controller/common/filemanager.php функцию image

2. что показывает firebug console при отработке .ajax

Sammy95 · 23 квітня 2011

Попробуйте вот этот вариант: https://opencartforum.com/topic/2713-%D0%BF%D1%80%D0%BE%D1%82%D0%B5%D1%81%D1%82%D0%B8%D1%80%D1%83%D0%B9%D1%82%D0%B5-elfinder-%D0%BD%D0%BE%D0%B2%D1%8B%D0%B9-%D0%BC%D0%B5%D0%BD%D0%B5%D0%B4%D0%B6%D0%B5%D1%80-%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B9/

Вхід

Замена стандартного менеджера файлов

Recommended Posts

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Створити обліковий запис

Вхід

Зараз на сторінці 0 користувачів

Покупцям

Розробникам

Корисна інформація

Останні розширення

Important Information