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