Помощник вида для интеграции elrte и elfinder
|
Опубликовано: 13.05.2010
|
Задача: унифицировать и упростить задачу инициализации текстового редактора 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.
- Спрашивать почему у вас не работает код, для этого есть тема форума закрепленная за статьей.
- Спрашивать как реализовать ту или иную функциональность, для этого необходимо создать свою тему на форуме.
Комментарии для того чтобы: высказать свое аргументированное мнение о статье, указать какие участки вызывают непонимание, что нужно исправить/улучшить, просто сказать спасибо.
Комментарии имеют древовидную структуру.
Если вы хотите ответить на определенный комментарий - нажмите на ссылку "Ответить" возле этого комментария.
