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.

Recommended bundles to use with:

TinymceBundle
IvoryCKEditorBundle
TrsteelCkeditorBundle
- Installation
- Basic configuration
  - Add configuration options to your config.yml
- Plugins support
- Configuring symfony service as a volumeDriver
- Elfinder Form Type
- [Using ElFinder with CKEditorBundle](#using-elfinder-with-ckeditorbundlehttpsgithubcomtrsteel88trsteelckeditorbundle)
  - Step 1: Installation:
  - Step 2: Configure CKEditor setting via settings.yml or through form builder:
- Using ElFinder with TinyMCE
  - [Using ElfinderBundle with TinyMCEBundle](#using-elfinderbundle-with-tinymcebundlehttpsgithubcomstfalcontinymcebundle)
  - Configuration
  - Integration with TinyMCE 4.x

Custom configuration provider
Custom loader
Changelog

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

Install legacy version of the bundle (documentation):

    composer require helios-ag/fm-elfinder-bundle: "~1.5"

For Symfony between 2.1 and 2.3 (2.3 included) use version ~2.3

    composer require helios-ag/fm-elfinder-bundle: "~2.3"

For Symfony 2.4 and later use version 3

    composer require helios-ag/fm-elfinder-bundle

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

    composer 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 ROLE_USER is provided as example.

Step 5: Install assets

Install and dump assets using symfony built-in commands:

app/console assets:install web

Basic configuration

Add configuration options to your config.yml

fm_elfinder:
    instances:
        default:
            locale: %locale% # defaults to current request locale
            editor: ckeditor # other options are tinymce, tinymce4, form, custom and simple, 
            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
            connector:
                debug: false # defaults to false
                roots:       # at least one root must be defined
                    uploads:
                        showhidden: false # defaults to false
                        driver: LocalFileSystem
                        path: uploads
                        upload_allow: ['image/png', 'image/jpg', 'image/jpeg']
                        upload_deny: ['all']
                        upload_max_size: 2M

default - instance of elfinder, can be used to define multiple configurations of ElFinder, allows simultaneous configuration for different types of WYSIWYG editors in your project
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" for tinymce3, "tinymce4" for tinymce4, "form" for form type, "simple" and "custom". 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.
editor_template - define template to renderer editor is set to "custom".
showhidden - hides directories starting with . (dot)
connector - root node for defining options for elfinder root directiories and debug option
roots - define "virtual directories" that reflect directories in your project.
- showhidden - show files and folders that starts from . (dot)
- driver - driver type, LocalFileSystem, Dropbox, FTP
- path - directory that contains files
- upload_allow: ['image/png', 'image/jpg', 'image/jpeg']
- upload_deny: ['all']
- upload_max_size: 2M

Plugins support

ElFinder comes with few plugins, like auto-resize, which can be enabled, by the following configuration:

fm_elfinder:
  instances:
    tinymce:
      locale: %locale%
      editor: tinymce4 
      include_assets: true
      relative_path: true
      fullscreen: true
      connector:
          debug: true # defaults to false
          bind:
              upload.presave:
                  - Plugin.AutoResize.onUpLoadPreSave
          plugin:
              AutoResize: # global resize options, applies to root which don't have his own resize configuraion 
                  enable: true 
                  maxWidth: 750 
                  maxHeight: 750 
                  quality: 95 # JPEG image save quality
          roots:       # at least one root must be defined
              uploads:
                  driver: LocalFileSystem
                  path: uploads
                  plugin:
                      AutoResize:
                          enable: true 
                          maxWidth: 500 
                          maxHeight: 500 
                          quality: 95 # JPEG image save quality
                  upload_allow: ['image/png', 'image/jpg', 'image/jpeg']
                  upload_deny: ['all']
                  upload_max_size: 2M
              resize1:
                  driver: LocalFileSystem
                  path: uploads
                  plugin:
                      AutoResize:
                          enable: true # For control by volume driver
                          maxWidth: 800 # Path to Water mark image
                          maxHeight: 800 # Margin right pixel
                          quality: 95 # JPEG image save quality
                  upload_allow: ['image/png', 'image/jpg', 'image/jpeg']
                  upload_deny: ['all']
                  upload_max_size: 2M
              resize2:
                  driver: LocalFileSystem
                  path: uploads
                  plugin:
                      AutoResize:
                          enable: true
                          maxWidth: 800 
                          maxHeight: 800 
                          quality: 95 
                  upload_allow: ['image/png', 'image/jpg', 'image/jpeg']
                  upload_deny: ['all']
                  upload_max_size: 2M

ElFinder comes with other plugins, check it Plugins folder for more information.

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" />

Elfinder Form Type

Since version 2.1 of the bundle, bundle come with custom form type, that is simple , that provide elfinder callback (opens Elfinder window), configuration for this form type is simple First, define instance with editor setted to "form":

fm_elfinder:
    instances:
        form:
            locale: %locale% # defaults to current request locale
            editor: form # other choices are tinymce or simple, and form
            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

On second step, add to your form builder (or form class), elfinder type, and pass instance and enable parameters:

$form = $this->createFormBuilder()
    ->add('elfinder','elfinder', array('instance'=>'form', 'enable'=>true))
    ->getForm();

Render form with twig as usual:

<form action="" method="post" {{ form_enctype(form) }}>
        {{ form_widget(form) }}
        <input type="submit" />
    </form>

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
        route_parameters:
             instance: ckeditor

or if you prefer Ivory CKEditor Bundle

ivory_ck_editor:
    default_config: default
    configs:
        default:
            filebrowserBrowseRoute: elfinder
            filebrowserBrowseRouteParameters:
                instance: ckeditor

Note that instance name should be the same as configured in elfinder bundle

<?php
// applies to Ivory CKEditor Bundle
$form = $this->createFormBuilder()
            ->add('content', 'ckeditor', array(
                'config' => array(
                    'filebrowser_image_browse_url' => array(
                        'route'            => 'elfinder',
                        'route_parameters' => array('instance' => 'ckeditor'),
                    ),
                ),
            ))
            ->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('instance_name', {'width':'900', 'height': '450', 'title':'ElFinder 2.0'}) }}

as shown below

{{ tinymce_init() }}
{{ elfinder_tinymce_init('instance_name') }}

instance_name is an instance of elfinder's configuration

Integration 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('instance_name', {'width':'900', 'height': '450', 'title':'ElFinder 2.0'} ) }} as shown below

     {{ elfinder_tinymce_init4('instance_name') }}
     {{ tinymce_init() }}

instance_name is instance of elfinder's configuration

That's all, Elfinder is configured to work with TinyMCE editor.

#Custom configuration provider

ElFinder bundle allows to override his configuration provider service:

fm_elfinder:
    configuration_provider: elfinder.configurator

where 'elfinder.configurator' is default ElFinder's bundle service to read configuration from DIC

To override service, simply define your own service:

services:
    my_elfinder_configurator:
        class:        Acme\DemoBundle\MyElfinderConfigurator
        arguments:    ["%my_arguments%"]

Configuration class must implement ElFinderConfigurationProviderInterface

method getConfiguration($instance) should return array of parameters compatible with ElFinder bundle configuration

#Custom loader

It is possible to override loader service with your own class:

services:
    my_loader:
        class:        AppBundle\Service\MyElFinderLoader
        arguments:    [@fm_elfinder.configurator]
        
fm_elfinder:
  loader: my_loader

#Changelog

3.4

Custom template renderer

3.3

Plugins support

3.2

Assetic support removed

3.1

Plugins support

3.0

BC in public api (controllers showAction method with second parameter)

2.5

Version with Request_stack

2.3.3

Assetic support removed

2.3.2

Multiple form types on the same page

2.3

Version for the LTS Symfony (2.3.x) (without RequestStack usage)

2.1

New Elfinder form type, provides basic field with Elfinder callback

2.0

Multiple instances of elfinder configuration (allows multiple editors in one project, with different elfinder configurations)

1.4

Dropped YUI compression support.
Uglify JS/CSS optional compression.

1.3

TinyMCE 4 integration
Added link to IvoryCKEditorBundle in Readme
Minor improvements
Readme TOC

Name		Name	Last commit message	Last commit date
Latest commit History 204 Commits
Bridge		Bridge
Configuration		Configuration
Controller		Controller
DataFixtures/ORM		DataFixtures/ORM
DependencyInjection		DependencyInjection
Entity		Entity
Form/Type		Form/Type
Loader		Loader
Model		Model
Resources		Resources
Tests		Tests
Twig/Extension		Twig/Extension
.travis.yml		.travis.yml
FMElfinderBundle.php		FMElfinderBundle.php
INTEGRATION_GUIDE.md		INTEGRATION_GUIDE.md
LICENSE		LICENSE
README.md		README.md
composer.json		composer.json
phpunit.xml.dist		phpunit.xml.dist

Folders and files

Latest commit

History

Repository files navigation

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: Install assets

Basic configuration

Add configuration options to your config.yml

Plugins support

Configuring symfony service as a volumeDriver

Elfinder Form Type

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

Configuration

Integration with TinyMCE 4.x

3.4

3.3

3.2

3.1

3.0

2.5

2.3.3

2.3.2

2.3

2.1

2.0

1.4

1.3

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages