Vegas CMF Form Elements

Vegas\Forms\Element\RichTextArea

TextArea extension with ckEditor.

All required js and css files are included in vegas library. Check installation guide for more details.

Configuration

namespace Foo\Forms;

use Vegas\Forms\Element\RichTextArea;

class Bar extends \Vegas\Forms\Form
{
    public function initialize()
    {
        $content = new RichTextArea('content');
        $content->getDecorator()->setTemplateName('jquery');
        $this->add($content);

        // ...
    }
}

File manager

In forms assets we already included ElFinder library with html templates. It is used as default file manager for RichTextArea element.

To make if fully functional we need to create additional module. Creation of example FileManager module will be featured below:

1. Create a module named FileManager with the following directory structure:

   FileManager
   ├── config
   |   ├── config.php
   |   └── routes.php
   ├── controllers
   |   └── frontend
   |       └── ManagerController.php
   ├── services
   |   └── Adapter
   |       ├── ElFinder
   |       └── ElFinder.php
   └── Module.php
   

2. Put ElFinder php classes to services\Adapter\Elfinder directory. ElFinder.php service should look like:

   namespace FileManager\Services\Adapter;
   
   use Phalcon\DI\InjectionAwareInterface;
   use Vegas\DI\InjectionAwareTrait;
   use Vegas\Utils\Path;
   
   define('ADAPTER_PATH', dirname(__FILE__) . '/ElFinder/');
   include_once ADAPTER_PATH.'elFinderConnector.class.php';
   include_once ADAPTER_PATH.'elFinder.class.php';
   include_once ADAPTER_PATH.'elFinderVolumeDriver.class.php';
   include_once ADAPTER_PATH.'elFinderVolumeLocalFileSystem.class.php';
   
   class ElFinder implements InjectionAwareInterface
   {
   
       use InjectionAwareTrait;
   
       public function getConnector()
       {
           error_reporting(0);
           /**
            * Simple function to demonstrate how to control file access using "accessControl" callback.
            * This method will disable accessing files/folders starting from '.' (dot)
            *
            * @param  string $attr attribute name (read|write|locked|hidden)
            * @param  string $path file path relative to volume root directory started with directory separator
            * @param $data
            * @param $volume
            * @return bool|null
            */
           function access($attr, $path, $data, $volume) {
               return strpos(basename($path), '.') === 0       // if file/folder begins with '.' (dot)
                   ? !($attr == 'read' || $attr == 'write')    // set read+write to false, other (locked+hidden) set to true
                   :  null;                                    // else elFinder decide it itself
           }
   
           // Documentation for connector options:
           // https://github.com/Studio-42/elFinder/wiki/Connector-configuration-options
           $opts = array(
               // 'debug' => true,
               'roots' => array(
                   array(
                       'driver'        => 'LocalFileSystem',   // driver for accessing file system (REQUIRED)
                       'path'          => Path::getPublicPath() . '/upload',       // path to files (REQUIRED)
                       'URL'           => Path::getRelativePath(false).'upload', // URL to files (REQUIRED)
                       'accessControl' => 'access'             // disable and hide dot starting files (OPTIONAL)
                   )
               )
           );
   
           // run elFinder
           $connector = new \elFinderConnector(new \elFinder($opts));
           $connector->run();
       }
   } 

3. Fill frontend ManagerController.php with following code:

   namespace FileManager\Controllers\Frontend;
   
   use Vegas\Mvc\Controller\ControllerAbstract;
   use Vegas\Utils\Path;
   
   class ManagerController extends ControllerAbstract
   {
       public function indexAction()
       {
           $elFinder = $this->serviceManager->getService('fileManager:adapter\ElFinder');
           $elFinder->getConnector();
       }
   }

4. Add route below to routes.php:

   return [
       'file-manager' => [
           'route' => '/file-manager',
           'paths' => [
               'module' => 'FileManager',
               'controller' => 'Frontend\Manager',
               'action' => 'index'
           ],
           'static' => true
       ]
   ];

5. In addition you can edit html templates for ElFinder, placed by default in public/assets/html/ui directory.