framework.zend.com
Stable релиз 2.0 / 1.12

Помощник вида для интеграции elrte и elfinder

К комментариям

Задача: унифицировать и упростить задачу инициализации текстового редактора ElRTE и файлового менеджера ElFinder.

Решение: использование специально для этого придуманных помощников вида (view helpers) в ZF.

Я использую ElRTE и ElFinder в административной панели сайта. Это наиболее удобные инструменты для визуального редактирования html-контента, а также для работы с файлами на серверами. Посему пример будет для модуля admin. Впрочем, сменив название модуля на Application, пример прекрасно подойдет для модуля по умолчанию (тот который в основной папке "/application/").

Так что же надо сделать, чтобы получить возможность максимально легко включать эти инструменты на сайте, и при этом также легко обновлять их с помощью простой замены файлов на сервере или смены в одном единственном месте пути до редакторов? Поехали:

1. Создаем модульное приложение на ZF с модулем "admin". Подробнее об этом можете прочитать в одной из предыдущих моих записях.

2. Скачиваем и сохраняем в "/public/js/" ElRTE и ElFinder

3. Настраиваем коннектор для ElFinder

4. Создаем файл "/application/modules/admin/view/helpers/EnableElRTE.php" со следующим содержимым:

<?php
/**
* Class inserts neccery code for initialize rich text editor ElRTE
*/
class Admin_View_Helper_EnableElRTE extends Zend_View_Helper_Abstract{

public function enableElRTE() {
$elrte_base_uri = "/js/back-end/elrte-1.0rc4/";

$this->view->headLink()->appendStylesheet("{$elrte_base_uri}css/elrte.full.css");
$this->view->headScript()->appendFile("{$elrte_base_uri}js/elrte.min.js");
$this->view->headScript()->appendFile("{$elrte_base_uri}js/i18n/elrte.ru.js");
}
}

5. Создаем файл "/application/modules/admin/view/helpers/EnableElFinder.php":

<?php
/**
* Class inserts neccery code for initialize file manager ElFinder
*
* @author Dimitry Dushkin
*
*/
class Admin_View_Helper_EnableElFinder extends Zend_View_Helper_Abstract{

public function enableElFinder() {
$elfinder_base_uri = "/js/back-end/elfinder-1.1/";

$this->view->headLink()->appendStylesheet("{$elfinder_base_uri}css/elfinder.css");
$this->view->headScript()->appendFile("{$elfinder_base_uri}js/elfinder.min.js");

$this->view->headScript()->captureStart() ?>
var opts = {
lang : 'ru',
styleWithCss : false,
width : 800,
height : 200,
toolbar : 'normal',
fmAllow : true,
fmOpen : function(callback) {
$('<div id="myelfinder" />').elfinder({
url : '<? echo $elfinder_base_uri?>connectors/php/connector.php',
lang : 'ru',
dialog : { width : 900, modal : true, title : 'Файлы' }, // открываем в диалоговом окне
closeOnEditorCallback : true, // закрываем после выбора файла
editorCallback : callback
})
}
};
<?php $this->view->headScript()->captureEnd();
}
}

6. В представлении IndexAction IndexController'a модуля admin (по умолчанию такие штуки располагаются в "/application/modules/admin/view/scripts/index/index.phtml") пишем следующее:

<? echo $this->enableElRTE();?>
<? echo $this->enableElFinder();?>

<script type="text/javascript">
$().ready(function() {
// создаем редактор
$('.rte_textarea').elrte(opts);
});
</script>
<form method="get">
<textarea name="content" id="content" class="rte_textarea" rows="5" cols="45"></textarea>
</form>

7. В основном шаблоне ("/application/layouts/scripts/index.phtml") при этом должно быть что-то типа такого (стандартный код для шаблонов ZF):

<?=$this->doctype() ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?=$this->headTitle() ?>
<?=$this->headMeta() ?>
<?=$this->headLink() ?>
<?=$this->headScript() ?>
</head>
<body>
<?=$this->layout()->content ?>
</body>
</html>

8. Удостоверяемся, что все работает как надо, пройдя по ссылке типа http://localhost/admin/index/index

что-то типа такого

Как это работает

Помощники вида необходимы для динамического добавления необходимых элементов в выходной html-код. Как видно, каждый наш помощник является потомком класса Zend_View_Helper_Abstract, который реализует интерфейс, позволяющий получить доступ к глобальному объекту Zend_View, который как раз и отвечает за выходной html-код.

В каждом помощнике мы обращаемся к стандартным помощникам вида (HeadScript Helper для добавления js-файлов и js-кода и HeadStyle Helper для добавления файлов стиля) через глобальный объект Zend_View.

метки: view helpers
Лучший способ следить за обновлениями сайта это подписаться на RSS
Если информация была полезной для вас, вы можете поддержать сайт.
Комментарии:
Владимир 13.05.2010 19:59 #
Интересная статья, давно думал про такое. Спасибо.
В 7 пункте код вставлен дважды, немного сбивает, подправь :)
Ответить
Александр Махомет 14.05.2010 12:56 #
Исправлено.
Ответить
IgorN 14.05.2010 19:56 #
Мне редактор очень понравился. Думаю интегрирую его в свою цмс
Ответить
Дмитрий Душкин 18.05.2010 12:23 #
Большое спасибо, что разместили мою статью на вашем сайте.)

Небольшая просьба, можете сверху добавить мою фамилию "Автор: Дмитрий Душкин"?
Ответить
Александр Махомет 18.05.2010 21:43 #
Пожалуйста, Дмитрий, исправил.
Ответить
TroexNevelin 21.05.2010 16:41 #
Отличная статейка, спасибо что поддерживаете наш продукт! Разместим ссылочку на вас на нашем проекте
Ответить
FlashNet 06.07.2010 00:10 #
В текущем варианте статьи elFinder не работает. Предлагаю вариант решения:

1. В представлении IndexAction IndexController'a модуля admin следует дописать HTML элемент для ElFinder'а. Например:
<div id='elFinder'></div>

2. И в настройке fmOpen написать не этот ужас:
... $('<div id="myelfinder" />').elfinder({ ...
а более лаконичней:
... $('#elFinder').elfinder({ ...

С моим исправлением, всё работает.
Спасибо за статью. На мой взгляд, очень удачный пример использования помощников вида на интересном примере.
Ответить
FlashNet 06.07.2010 12:51 #
Хотя нет, все правильно. Это я ошибся :(
Ответить
servok 06.09.2010 09:53 #
А ElRTE поддерживает вставку картинок? Подключил все как и в статье, ElRTE работает, но ElFinder'а нигде нет.
Ответить
Михаил 20.08.2011 21:48 #
Помощники это конечно хорошо.
Но не будет лишним посмотреть в код connector.php и изменить

$fm = new elFinder($opts);
$fm->run();

хотя бы на

session_save_path(realpath(dirname(__FILE__) . '/../../../data/session/')); //или куда вы сохраняете свою сессию
session_start();
if (isset($_SESSION['Zend_Auth']))
{
  $storage = $_SESSION['Zend_Auth']['storage'];
  if ($storage->role == 'admin')
  {
    $fm = new elFinder($opts);
    $fm->run();
  }
}
Ответить
Уважаемые пользователи. Комментарии не для того чтобы:
  1. Спрашивать почему у вас не работает код, для этого есть тема форума закрепленная за статьей.
  2. Спрашивать как реализовать ту или иную функциональность, для этого необходимо создать свою тему на форуме.

Комментарии для того чтобы: высказать свое аргументированное мнение о статье, указать какие участки вызывают непонимание, что нужно исправить/улучшить, просто сказать спасибо.

Комментарии имеют древовидную структуру.
Если вы хотите ответить на определенный комментарий - нажмите на ссылку "Ответить" возле этого комментария.

Комментарии не соответствующие этим правилам могут быть удалены. Спасибо за понимание.
Комментарии временно отключены, вы можете воспользоваться форумом.