Перейти к содержанию
free

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

Рекомендуемые сообщения

Привет всем.

Решил поделиться с вами как заменить стандартный менеджер изображений на 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

post-3497-0-46723300-1302529293_thumb.jpg

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Нашел интересную доработку для 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). У кого получится, делитесь плиз.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Изображение

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

все разобрался, в этой версии используются 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; ?>'

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

все разобрался, в этой версии используются 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. В админке не отображается превьюшка когда только добавил фотку, после того как снова открываешь страницу все есть. как починить, что сразу видеть то что добавил?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

все разобрался, в этой версии используются 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; ?>'
после этого все должно работать.

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

Изображение --> Изображение --> Изображение

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Изображение --> Изображение --> Изображение

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

$('#' + 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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

$('#' + 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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

как токены для 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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.