• Zend Framework и WYSIWYG (CKEditor)

    by  • 10.07.2010 • javascript, Zend Framework, программирование • Комментарии [19]

    wysiwyg zendframework1 150x150 Zend Framework и WYSIWYG (CKEditor)Сегодня я расскажу вам как встроить в своей проект визуальный редактор, так часто встречающийся на многих сайтах. Он может применяться в разных местах, будь то редактирование статей/новостей на сайте, может заменить простую форму для отправления комментариев. Возможности ограничиваются лишь вашей фантазией.

    Перво-наперво скачиваем CKEditor с официального сайта и копируем в папку public нашего проекта, точнее в public/js/ckeditor, чтобы визуальный редактор лежал в отдельной папке дабы не запутаться с остальными скриптами. Я оттуда ничего не удалял, ведь это ознакомительная версия, на продакшне легко можно удалить большую половину файлов: примеры, скины, ненужные языки локализации.

    Дальше создаем папку Izwt (здесь вы можете назвать ее как хотите, главное не забыть потом поменять название в том месте, где встречается этот префикс) в папке library, в которой будут располагаться дополнительные классы, которые мы можем переносить от проекта к проекту. И настраиваем автозагрузку, чтобы помимо Zend_ классов, загружались еще и наши Izwt_. Для этого в загрузчике bootstrap.php пропишем следующее.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    protected function _initAutoload()
    {
        $autoloader = Zend_Loader_Autoloader::getInstance();
        $autoloader->registerNamespace('Izwt_');
        $moduleLoader = new Zend_Application_Module_Autoloader(array(
                    'namespace' => '',
                    'basePath' => APPLICATION_PATH
                ));
        return $moduleLoader;
    }

    protected function _initViewHelpers()
    {
        $loader = new Zend_Loader_PluginLoader();
        $loader->addPrefixPath('Izwt_View_Helper', 'Izwt/View/Helper');
        $viewRenderer = Zend_Controller_Action_HelperBroker::getStaticHelper('viewRenderer');
        $viewRenderer->view->addHelperPath('Izwt/View/Helper', 'Izwt_View_Helper');
        return $loader;
    }

    _initAutoload() зарегистрирует наш префикс и, если следовать стандарам Zend по наименованию, будет загружать наши файлы автоматически. _initViewHelpers() укажет где искать помощники вида.

    Далее создадим класс Izwt_Form_Element_Wysiwyg, который будет расширять Zend_Form_Element_Xhtml нашим помощником вида.
    library/Izwt/Form/Element/Wysiwyg.php

    1
    2
    3
    4
    5
    6
    7
    8
    <?php

    class Izwt_Form_Element_Wysiwyg extends Zend_Form_Element_Xhtml
    {

        public $helper = 'formWysiwyg';

    }

    Осталось создать вью хелпер, который и будет выполнять всю грязную работу по взаимодействию.
    library/Izwt/View/Helper/FormWysiwyg.php

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    <?php

    require_once APPLICATION_PATH . '/../public/js/ckeditor/ckeditor.php';

    // папка где лежит редактор


    class Izwt_View_Helper_FormWysiwyg extends Zend_View_Helper_FormElement
    {

        public function formWysiwyg($name = null, $value = null, $attribs = null)
        {
            if (is_null($name) && is_null($value) && is_null($attribs)) {
                return $this;
            }
            $info = $this->_getInfo($name, $value, $attribs);
            extract($info); // name, value, attribs, options, listsep, disable

            $editor = new CKEditor();
            // пусть возвращает значение, а не выводит в браузер
            $editor->returnOutput = true;

            // задаем базовый путь к визуальному редактору
            $editor->basePath = '/js/ckeditor/';
           
            // ширина редактора
            $editor->config['width'] = 600;

            // $value содержит значение по умолчанию
            return $editor->editor('wysiwyg', $value);
        }

    }

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

    Наша форма application/forms/Wysiwyg.php

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <?php

    class Form_Wysiwyg extends Zend_Form
    {

        public function init()
        {
            $wysiwyg = new Izwt_Form_Element_Wysiwyg('wysiwyg', array(
                        'label' => 'form.label.wysiwyg',
                        'required' => true,
                        'filters' => array('StringTrim')
                    ));

            $sumbit = $this->createElement('submit', 'submit', array(
                        'label' => 'form.label.submit'
                    ));

            $this->addElements(array(
                $wysiwyg, $sumbit
            ));
        }

    }

    В 8 строке мы создаем наш элемент, как обычный элемент зендовской формы.

    Наш контроллер application/controllers/IndexController.php

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <?php

    class IndexController extends Zend_Controller_Action
    {

        public function init()
        {
           
        }

        public function indexAction()
        {
            $this->view->headTitle('встраиваем Wysiwyg');
            $form = new Form_Wysiwyg();
            if ($form->isValid($_POST)) {
                $this->view->message = $form->getValues();
            } else {
                $this->view->form = $form;
            }
        }

    }

    И собственно сам шаблон, который все это дело и будет отображать. application/views/scripts/index/index.phtml

    1
    2
    3
    4
    5
    <?php if (isset($this->form)): ?>
    <?php echo $this->form; ?>
    <?php endif; ?>

    <?php var_dump($this->message); ?>

    Вот и все, запускаем и радуемся, интересных вам проектов =)

    Комментарии к "Zend Framework и WYSIWYG (CKEditor)"

    1. Александр
      21.10.2010 at 12:05

      У меня не заработало… Пишет, что не может найти плагин «Warning: Exception caught by form: Plugin by name ‘FormWysiwyg’ was not found in the registry…»
      В бутстрапе инициализация загрузчика плагинов есть:
      protected function _initViewHelpers()
      {
      $loader = new Zend_Loader_PluginLoader();
      $loader->addPrefixPath(‘CKEditor_View_Helper’, ‘CKEditor/View/Helper/’);
      return $loader;
      }
      Не могу никак разобраться, в чем дело?…

      • 21.10.2010 at 13:52

        попробуйте вот так

        1
        2
        3
        4
        5
        6
        7
        8
        $this->bootstrap('layout');
                $layout = $this->getResource('layout');
                $view = $layout->getView();
                $viewRenderer = Zend_Controller_Action_HelperBroker::getStaticHelper('viewRenderer');

                      $viewRenderer->view->addHelperPath(APPLICATION_PATH . "/views/helpers", 'My_Helper');
               
        $view->addHelperPath('ZendX/JQuery/View/Helper', 'ZendX_JQuery_View_Helper');

        пути замените на свои

        • Владимир
          14.06.2011 at 10:57

          У меня та же ошибка. Путь к хелперу library/App/View/Helper, jQuery подгружается в бутстрапе так:
          function _initView() {
          $this->bootstrap(‘layout’);
          $layout = $this->getResource(‘layout’);
          $view = $layout->getView();
          $view->addHelperPath(«ZendX/JQuery/View/Helper», «ZendX_JQuery_View_Helper»);
          $view->jQuery()
          ->enable()
          ->uiEnable()
          ->setLocalPath(‘/js/jquery-1.4.4.min.js’)
          ->setUiLocalPath(‘/js/jquery-ui-1.8.9.custom.min.js’)
          ->addStylesheet(‘/css/humanity/jquery-ui-1.8.9.custom.css’);
          return $view;
          }
          ————-
          Можно для тех кто в танке — куда что вписывать?

          • 14.06.2011 at 11:33

            попробуйте в application/Bootstrap.php
            написать следующее

            1
            2
            3
            4
            5
            6
            7
            8
            9
            10
            11
            protected function _initViewHelpers()
            {
                $loader = new Zend_Loader_PluginLoader();
                $loader->addPrefixPath('Izwt_View_Helper', 'Izwt/View/Helper');

            $viewRenderer = Zend_Controller_Action_HelperBroker::getStaticHelper('viewRenderer');

                          $viewRenderer->view->addHelperPath('App/View/Helper', 'App_View_Helper');

                return $loader;
            }
            • Владимир
              14.06.2011 at 13:21

              Заработало, спс. Впринципе изначально делал тоже самое, видимо что-то недосмотрел

            • 14.06.2011 at 14:03

              я внес изменения в заметку, поэтому это не вы недосмотрели, а я )

    2. Александр
      22.10.2010 at 07:08

      Спасибо! Теперь все заработало!

      • 22.10.2010 at 10:58

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

    3. 09.11.2010 at 23:48

      А с загрузкой файлов через ckeditor не разбирались?

      • 10.11.2010 at 10:34

        мне кажется не должно быть ничего сложного, в конфиге к WYSIWYG нужно прописать путь к коннектору, роль которого может исполнять ваш контроллер

    4. stuchin
      17.11.2010 at 15:40

      с подключением файл менелжера есть проблема,
      причем я пробовал разные(штук 5 наверно),

      при подллючениии файл менеджера , в меню повляется кнопка, «просмотреть на сервере», а при ее нажатии файл менеджер не запускается, посколько вылазит ошибка

      Not Found

      The requested URL /admin/editblock/edit/id/js/imglib/index.html was not found on this server.

      здесь /admin/editblock/edit мой контроллер
      а js/imglib/index.html запускатель файл менеджера,
      если поставить другой файл менеджер, то же самое, ckeditor добавляет путь к контроллеру к пути к файловому менеджеру.
      Не знаю как от этого избавиться.

      • 17.11.2010 at 16:01

        может вам попробовать предварять путь к js слэшом, к примеру,

        1
        /js/imglib/index.html
    5. stuchin
      17.11.2010 at 18:24


      Вредный:

      может вам попробовать предварять путь к js слэшом, к примеру,
      1/js/imglib/index.html

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

      • 18.11.2010 at 10:40

        в следующий раз решите задачу сами и уже в разы быстрее :)

    6. guest
      08.03.2011 at 16:09

      У меня та же проблема, вот только вместо того, чтобы увидить решение, я вижу надписи «CODECOLORER_BLOCK_13″


      Вредный:

      попробуйте вот так
      ::CODECOLORER_BLOCK_13::
      пути замените на свои

    7. guest
      09.03.2011 at 13:49

      Отлично! Спасибо

    8. Володимир
      15.03.2012 at 11:43

      Все супер =) дякую за урок, тільки вот тут

      class Form_Wysiwyg extends Zend_Form

      думаю краще зробити

      class Application_Form_Wysiwyg extends Zend_Form

      так автозагрузка на 100% воркае

      • 15.03.2012 at 15:06

        так наименование классов получается слишком громоздким, но кому как виднее )

    Добавить комментарий

    Ваш e-mail не будет опубликован. Обязательные поля помечены *