Symfony Froala Editor

Symfony 3 & 4 update

This bundle is now compatible with Symfony 2, 3 and 4 on the same branch (dev-master).

Installation

Step 1 : Add KMSFroalaEditorBundle to your composer.json (according to your needed version)

Copy

{
  "require": {
    "kms/froala-editor-bundle": "dev-master"
  }
}

Step 2 : Add the bundle to your bundles.php

Copy

// config/bundles.php

return [
    //..
    //..
    KMS\FroalaEditorBundle\KMSFroalaEditorBundle::class => ['all' => true],
];

Step 3 : Import routes

Copy

// config/routes.yaml
kms_froala_editor:
  resource: "@KMSFroalaEditorBundle/Resources/config/routing.yml"
  prefix:   /froalaeditor

Step 4 : Install the bundle

$ composer update

Step 5 : Configure the bundle

Required settings:

Open config/packages/config.yaml and add the following code to set a language:

Copy

kms_froala_editor:
  language: "nl"

If config.yamldoesn't exist you need to create it.

Other Options:

You can use all the available Froala options, refer to the Options Documentation for more information.

• For options that require an array, provide a value array.
• For options that require an object, provide a key/value array.

If you don't add an option on the config file Froala the default values

The following example shows each option type:

Copy

// config/packages/config.yaml
kms_froala_editor:

  toolbarInline: true
  tableColors: [ "#FFFFFF", "#FF0000" ]
  saveParams: { "id" : "myEditorField" }

Note: Some options require plugins, refer to the Options Documentation. for more information

There are custom options that provide a better integration with Symfony. The following section describes the available custom options:

• Use a Froala license number
  serialNumber: "XXXX-XXXX-XXXX"

• Disable JQuery inclusion.
  includeJQuery: false

• Disable CodeMirror inclusion.
  includeCodeMirror: false

• Disable Font Awesome inclusion.
  includeFontAwesome: false

• Disable all bundle javascripts inclusion (not concerning JQuery nor CodeMirror). When you are using Grunt or other and you want to include yourself all scripts.
  includeJS: false

• Disable all bundle CSS inclusion (not concerning Font Awesome nor CodeMirror). When you are using Grunt or other and you want to include yourself all stylesheets.
  includeCSS: false

• Change the froala base path.
  basePath: "/my/custom/path"

• Custom JS file. Used to add custom plugins/buttons
  customJS: "/custom/js/path"

Step 6 : Add Froala to your form

The following example shows how to add a froala type in your form:

Copy

use KMS\FroalaEditorBundle\Form\Type\FroalaEditorType; // Symfony 4
//..
$builder->add( "yourField", "froala" ); // Symfony 2
$builder->add( "yourField", FroalaEditorType::class ); // Symfony 3 & 4

You can override all configuration items:

Copy

$builder->add( "yourField", "froala", array(
    "language" => "fr",
    "toolbarInline" => true,
    "tableColors" => [ "#FFFFFF", "#FF0000" ],
    "saveParams" => [ "id" => "myEditorField" ]
) );

Step 7 : Display editor content

Manually:

To preserve the look of the edited HTML outside of the editor you have to include the following CSS files:

Copy

<!-- CSS rules for styling the element inside the editor such as p, h1, h2, etc. -->
<link href="../css/froala_style.min.css" rel="stylesheet" type="text/css" />

Also, you should make sure that you put the edited content inside an element that has the class fr-view:

Copy

<div class="fr-view">
  {{ myContentHtml | raw }}
</div>

Using the Twig extension:

To use the Twig extension, you have to enable the PHP templating engine:

Copy

// app/config.yml

framework:
  templating:
    engines: ['twig', 'php']

Next, call the display function (note that the front CSS file is not included if the parameter includeCSS is false ):

Copy

{{ froala_display( myContentHtml ) }}

More configuration

Plugins

All Froala plugins are available.

The following example shows how to disable unwanted plugins

Copy

// app/config.yml

kms_froala_editor:
    pluginsDisabled: [ "save", "fullscreen" ]

The following example show how to enable plugins:

Copy

// app/config.yml

kms_froala_editor:
    pluginsEnabled: [ "image", "file" ]

Plugins can be enabled/disabled for each Froala instance by passing the same array in the form builer.

Concept: Image upload/manager

This bundle provides integration with the Froala image upload functionality to store your images on your own web server (see custom options for configuration like upload folder).

If you want to use your own uploader, you can override the configuration.

There are custom options that provide a better integration with Symfony. The following section describes the available custom options:

• The image upload folder in your /web directory. The default value is: "/upload".
  imageUploadFolder: "/my/upload/folder"

• The image upload URL base. Used when you employ URL rewritting for your assets. The default value is the same value as the one provided as folder.
  imageUploadPath: "/my/upload/path"

Concept: File upload

This bundle provides integration with the Froala file upload functionality to store your files on your own web server (see custom options for configuration like upload folder).

If you want to use your own uploader, you can override the configuration.

There are custom options that provide a better integration with Symfony. The following section describes the available custom options:

• The file upload folder in your /web directory.The default value is: "/upload".
  fileUploadFolder: "/my/upload/folder"

• The file upload URL base. Used when you employ URL rewritting for your assets. The default value is the same value as the one provided as folder.
  fileUploadPath:"/my/upload/path"

• Your public directory, from the root directory.The default value is: "/web"
  publicDir: "/public"

Concept: Autosave

You can use the Froala autosave functionality to automatically request a save action on your server. The following example shows how to configure its options:

Copy

// app/config.yml

kms_froala_editor:
  saveURL: "my_save_route"
  saveInterval: 2500
  saveParam: "content"

There are custom options that provide a better integration with Symfony. The following section describes the available custom options:

• Add some parameters to your save URL. Used when you need parameters to generate your save action route. The default value is: null.
  saveURLParams: { "id" : "myId" }

You can add some parameters in your save route (see custom options).