FMElfinderBundle

ElFinder integration in Symfony2

elFinder is an open-source file manager for web, written in JavaScript using jQuery UI. Creation is inspired by simplicity and convenience of Finder program used in Mac OS X operating system.

• FMElfinderBundle
  • Installation
    • Step 1: Installation
    • Step 2: Enable the bundle
    • Step 3: Import FMElfinderBundle routing file
    • Step 4: Configure your application's security.yml
    • Step 5: Configure assetic
    • Step 6: Install and dump assets
  • Basic configuration
    • Add configuration options to your config.yml
  • Configuring symfony service as a volumeDriver
  • Using ElFinder with CKEditorBundle
    • Step 1: Installation:
    • Step 2: Configure CKEditor setting via settings.yml or through form builder:
  • Using ElFinder with TinyMCE
    • Using ElfinderBundle with TinyMCEBundle
    • Integrating with TinyMCE 4.x

Installation

To install this bundle, you'll need both the lib ElFinderPHP and this bundle.

This instruction explain how to setup bundle on Symfony 2.1 and newer

Step 1: Installation

Add FMElfinderBundle in your composer.json:

{
    "require": {
        "helios-ag/fm-elfinder-bundle": "1.x"
    }
}

Now tell composer to download the bundle by running the command:

$ php composer.phar update helios-ag/fm-elfinder-bundle

Step 2: Enable the bundle

Enable the bundle in the kernel:

<?php
// app/AppKernel.php

public function registerBundles()
{
    $bundles = array(
        // ...
        new FM\ElfinderBundle\FMElfinderBundle(),
    );
}

Step 3: Import FMElfinderBundle routing file

# app/config/routing.yml
elfinder:
     resource: "@FMElfinderBundle/Resources/config/routing.yml"

Step 4: Configure your application's security.yml

Secure ElFinder with access_control:

# app/config/security.yml
security:

    //....
    access_control:
        - { path: ^/efconnect, role: ROLE_USER }
        - { path: ^/elfinder, role: ROLE_USER }

ROLE_USER is provided as example.

Step 5: Configure assetic

Under assetic section of your config.yml, add FMElfinderBundle to bundles section, also you can enable uglify js/css compressor (also you need to enable option "compression: true" under bundle configuration).

Also set "use_controller: false".

assetic:
    debug:          %kernel.debug%
    use_controller: false
    bundles:        [FMElfinderBundle]
    java: /usr/bin/java
    filters:
        cssrewrite: ~
        uglifyjs2:
            # the path to the uglifyjs executable
            bin: /usr/bin/uglifyjs
        uglifycss:
            bin: /usr/bin/uglifycss

Step 6: Install and dump assets

Install and dump assets using symfony built-in commands:

app/console assets:install web
app/console assetic:dump --env=prod

Basic configuration

Add configuration options to your config.yml

fm_elfinder:
    locale: %locale% # defaults to current request locale
    editor: ckeditor # other choices are tinymce or simple
    showhidden: false # defaults to false
    fullscreen: true # defaults true, applies to simple and ckeditor editors
    include_assets: true # disable if you want to handle loading of the javascript and css assets yourself
    compression: false # enable if you configured the uglifycss and uglifyjs2 assetic filters and want compression
    connector:
        debug: false # defaults to false
        roots:       # at least one root must be defined
            uploads:
                driver: LocalFileSystem
                path: uploads
                upload_allow: ['image/png', 'image/jpg', 'image/jpeg']
                upload_deny: ['all']
                upload_max_size: 2M

• path - define root directory for the files inside web/ directory, default is "uploads". Make sure to set proper write/read permissions to this directory.
• url - url to be prefixed to image path, for displaying. Can be either absolute or relative. If relative, it will be prefixed with the applications base-url. If left blank, url will be the base-url, appened with the value of the 'path' parameter
• driver - can be LocalFileSystem, FTP or MySQL2, currently supported only LocalFileSystem, default is LocalFileSystem
• locale - locale determines, which language, ElFinder will use, to translate user interface, default is current request locale
• editor - determines what template to render, to be compatible with WYSIWYG web editor, currently supported options are: "ckeditor", "tinymce" and "simple". How to configure CKEDitor and TinyMCE to work with this bundle, will be explained further in this document. "simple" can be used as standalone filebrowser for managing and uploading files.
• showhidden - hides directories starting with . (dot)

Configuring symfony service as a volumeDriver

volumeDriver can be declared as Symfony service The service should however be an instance of the FM\ElFinderPHP\Driver\ElFinderVolumeDriver class. This check is to ensure the service is a valid ElFinder VolumeDriver.

To configure a root with a service-driver you can simply use the service id as the drive key:

fm_elfinder:
    connector:
        roots:
            uploads:
                driver: elfinder.driver.filesystem
                path: uploads

This means that if you add the service definition:

<service id="elfinder.driver.filesystem" class="FM\ElFinderPHP\Driver\ElFinderVolumeLocalFileSystem" />

Using ElFinder with CKEditorBundle

Mostly filebrowsers used with WYSIWYG editors to upload images and other files. The example above will show how to configure CKEditorBundle by Trsteel to work with ElFinder through FMElFinderBundle Also take a view to @egeloen IvoryCKEditorBundle, which includes configuration guide for both bundles

Step 1: Installation:

Install both bundles according README files

Step 2: Configure CKEditor setting via settings.yml or through form builder:

trsteel_ckeditor:
    ...
    filebrowser_image_browse_url:
        route: elfinder

<?php

$form = $this->createFormBuilder()
            ->add('content', 'ckeditor', array(
                'filebrowser_image_browse_url' => array(
                    'route'            => 'elfinder',
                    'route_parameters' => array(),
                ),
            ))
            ->getForm()
;

ElFinder will be available under Insert Image dialog

Using ElFinder with TinyMCE

You can integrate TinyMCE byself or use Bundles that already add TinyMCE functionality to your Symfony project. Below instruction how to integrate FMElfinderBundle with TinyMCEBundle

Using ElfinderBundle with TinyMCEBundle

Instruction for bundle version 0.2.1 (TinyMCE 3.x), instruction for TinyMCE 4.x, you can find at the end of this document. Download both bundles, configure, dump and install assets as written in installation steps

Configuration

Update the editor property in your app/config.yml Set TinyMce popup path:

fm_elfinder:
    editor: tinymce
    tinymce_popup_path: "asset[bundles/stfalcontinymce/vendor/tiny_mce/tiny_mce_popup.js]"

Under tinymce configuration node, theme configuration, add: file_browser_callback : 'elFinderBrowser'

stfalcon_tinymce:
    theme:
        simple:
            file_browser_callback : 'elFinderBrowser'

after ( {{ tinymce_init() }} ) function call place ElfinderBundle's function: {{ elfinder_tinymce_init() }} as shown below

{{ tinymce_init() }}
{{ elfinder_tinymce_init() }}

Integrating with TinyMCE 4.x

Update the editor property in your app/config.yml

 fm_elfinder:
     editor: tinymce4

Under tinymce configuration node, theme configuration, add: file_browser_callback : elFinderBrowser

stfalcon_tinymce:
     theme:
         simple:
             file_browser_callback : elFinderBrowser

before ( {{ tinymce_init() }} ) function call (order is important) place ElfinderBundle's function: {{ elfinder_tinymce_init4() }} as shown below

     {{ elfinder_tinymce_init4() }}
     {{ tinymce_init() }}

Thats all, Elfinder is integrated into TinyMCE.

Manual integration guide can be found here

##Changelog

1.4

• Made compressing assets optional. When compressing is active, it now uses uglify.js instead of YUI compressor.