Zend Framework: пример помощников вида для интеграции 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):
    <?php echo $this->doctype() ?>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<?php echo $this->headTitle() ?>
    	<?php echo $this->headMeta() ?>
    	<?php echo $this->headLink() ?>
    	<?php echo $this->headScript() ?>
    </head>
    <body>
             <?php echo $this->layout()->content ?>
    </body>
    </html>
    
  8. Удостоверяемся, что все работает как надо, пройдя по ссылке типа http://localhost/admin/index/index

Получим что-то типа такого

семейное фото ElRTE и ElFinder

семейное фото ElRTE и ElFinder

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

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

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

Ссылки в записи

 

UPDATE: по твиттеру товарищ Вредный рассказал о своём усовершенствованном решении этого вопроса. Там предлагается подключать elRte и elFinder в описании формы.

  • Pingback: progg.ru()

  • Pingback: progg.ru()

  • Mimokrokodil

    А через декоратор это сделать не правильнее? Всё равно elRTE используется как часть формы.

  • Mimokrokodil

    А через декоратор это сделать не правильнее? Всё равно elRTE используется как часть формы.

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

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