Home

Awesome

FMTinyMCEBundle

TinyMCE integration in Symfony

The purpose of bundle is to provide seamless integration between elFinder and TinyMCE editor.

Code Quality Assurance

CoverAllsLicenseStyleCIVersion Status
Coverage StatusLicenseStyleCILatest Stable Version Latest Unstable Version
Downloads
Total Downloads

TinyMCE is a platform independent web-based JavaScript WYSIWYG HTML editor control released as open source under LGPL.

TinyMCE enables you to convert HTML TEXTAREA fields or other HTML elements to editor instances.

Table of contents

Installation

Step 1: Installation

Add FMTinyMCEBundle to your composer.json:

{
    "require": {
        "helios-ag/fm-tinymce-bundle": "~1"
    }
}

If you want to override default assets directory of Richfilemanager, add next option. By default, assets copied to web/assets/tinymce or public/assets/tinymce depending on Symfony version

{
    "config": {
        "tinymce-dir": "web/assets/"
    }
}

Add composer script

"FM\\TinyMCEBundle\\Composer\\TinyMCEScriptHandler::copy",

to scripts section of composer.json

{
  "scripts": {
      "symfony-scripts": [
          "Incenteev\\ParameterHandler\\ScriptHandler::buildParameters",
          "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::buildBootstrap",
          "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::clearCache",
          "FM\\TinyMCEBundle\\Composer\\TinyMCEcriptHandler::copy",
          "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::installAssets",
          "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::installRequirementsFile",
          "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::prepareDeploymentTarget"
      ]
    }
}

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

composer update helios-ag/fm-tinymce-bundle

Step 2: Enable the bundle

Enable the bundle in the kernel:

<?php
// app/AppKernel.php

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

Basic configuration

Add configuration options to your config.yml

fm_tinymce:
    instances:
        first_instance:
            language: en_US
            width: 300
            height: 400
        my_advanced_configuration:
             locale: ru_RU

##Advanced Configuration

To make story short, here example of Integration between TinyMCE and Elfinder bundles

fm_tinymce:
    instances:            # Required
        elfinder:
            language: ru
            image_advtab:         true
            file_picker_callback: elFinderBrowser
            filebrowser_type:     fm_elfinder
            filebrowser:
                route:                elfinder
                route_parameters:
                    instance: tinymce

and configuration for ElFinderBrowser

fm_elfinder:
    instances:
        tinymce:
            language: ru
            editor: tinymce4 #
            include_assets: true
            relative_path: true
            connector:
                roots:       # at least one root must be defined
                    uploads:
                        show_hidden: false
                        driver: LocalFileSystem
                        path: uploads
                        upload_allow: ['all']

Full configuration reference example

fm_tinymce:
    enable:               true
    inline:               false
    base_path:            assets/tinymce/
    js_path:              assets/tinymce/tinymce.min.js
    instances:
        default:
            language:             en_US
            width:                600
            height:               300
            theme:                modern
            toolbar_item_size:    small
            menubar:              file edit insert view format table tools
            image_advtab:         false
            templates:
                templates:
                    title:                ~
                    content:              ~
            plugins:              ""
            relative_urls:        false
            convert_urls:         false
            toolbars:
                toolbar1:         undo redo | styleselect | bold italic | link image
            filebrowser_type:     fm_elfinder
            file_picker_callback: elFinderBrowser
            filebrowser:
                url:                  http://localhost/elfinder
                route:                elfinder
                route_parameters:
                    instance: default