PHPackages                             leapt/froala-editor-bundle - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. leapt/froala-editor-bundle

ActiveSymfony-bundle[Utility & Helpers](/categories/utility)

leapt/froala-editor-bundle
==========================

Provides a Froala editor integration for Symfony 6 & 7.

v1.8.0(8mo ago)1161.9k↓33%1[3 issues](https://github.com/leapt/froala-editor-bundle/issues)MITPHPPHP ^8.2CI passing

Since Nov 9Pushed 7mo ago2 watchersCompare

[ Source](https://github.com/leapt/froala-editor-bundle)[ Packagist](https://packagist.org/packages/leapt/froala-editor-bundle)[ RSS](/packages/leapt-froala-editor-bundle/feed)WikiDiscussions 1.x Synced 1mo ago

READMEChangelog (10)Dependencies (15)Versions (13)Used By (0)

Leapt FroalaEditor bundle
=========================

[](#leapt-froalaeditor-bundle)

[![Package version](https://camo.githubusercontent.com/05e40c43456117d6afe1713af71ed22d050518ad8690bb8ad9a533d9c87e2011/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6c656170742f66726f616c612d656469746f722d62756e646c652e737667)](https://packagist.org/packages/leapt/froala-editor-bundle)[![Build Status](https://camo.githubusercontent.com/5704438844c5a80907d1c4ec9d0c3ec2a8fe8e0a2d246529d40590b5c6b1442b/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f6c656170742f66726f616c612d656469746f722d62756e646c652f636f6e74696e756f75732d696e746567726174696f6e2e796d6c3f6272616e63683d312e78)](https://github.com/leapt/froala-editor-bundle/actions?query=workflow%3A%22Continuous+Integration%22)[![Downloads](https://camo.githubusercontent.com/22a59e5769b85389cff6073f3ed2c68d593d913e902489df8ccb2e89fc1e43c2/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6c656170742f66726f616c612d656469746f722d62756e646c652e737667)](https://packagist.org/packages/leapt/froala-editor-bundle)[![PHP Version](https://camo.githubusercontent.com/929ee61647655129e407c2dfc0707e77e7c4c2e979d447bcca660a5a226d336b/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f7068702d762f6c656170742f66726f616c612d656469746f722d62756e646c652e737667)](https://packagist.org/packages/leapt/froala-editor-bundle)[![Licence](https://camo.githubusercontent.com/678b1c7a4322705765ea310228ada3ffc124283c3a09768500686dcfd3e2a86d/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f6c656170742f66726f616c612d656469746f722d62756e646c652e737667)](https://packagist.org/packages/leapt/froala-editor-bundle)

Introduction
------------

[](#introduction)

This bundle aims to easily integrate & use the Froala editor in Symfony 6.4+/7.0+.

This bundle is a maintained fork of the [KMSFroalaEditorBundle](https://github.com/froala/KMSFroalaEditorBundle).

The changelog is available here:

- [CHANGELOG-1.x.md](CHANGELOG-1.x.md)

Table of Contents
-----------------

[](#table-of-contents)

1. [Migration to Leapt Froala Editor bundle from KMS](#migration-to-leapt-froala-editor-bundle-from-kms)
2. [Installation](#installation)
    1. [Step 1: Install the bundle using composer](#step-1-install-the-bundle-using-composer)
    2. [Step 2: Add the bundle to your bundles.php](#step-2-add-the-bundle-to-your-bundlesphp)
    3. [Step 3: Import routes](#step-3-import-routes)
    4. [Step 4: Load Twig form widget](#step-4-load-twig-form-widget)
    5. [Step 5: Configure the bundle](#step-5-configure-the-bundle)
        1. [Required](#required)
        2. [Other options](#other-options)
    6. [Step 6: Add Froala to your form](#step-6-add-froala-to-your-form)
    7. [Step 7: Install asset files](#step-7-install-asset-files)
    8. [Step 8: Display editor content](#step-8-display-editor-content)
        1. [Manually](#manually)
        2. [Using the Twig extension](#using-the-twig-extension)
    9. [Step 9: Profiles (custom configurations)](#step-9-profiles-custom-configurations)
3. [More configuration](#more-configuration)
    1. [Plugins](#plugins)
    2. [Concept: Image upload/manager](#concept-image-uploadmanager)
    3. [Concept: File upload](#concept-file-upload)
    4. [Concept: Autosave](#concept-auto-save)
    5. [Webpack Encore configuration](#webpack-encore-configuration)
4. [TODO](#todo)
5. [Licence](#licence)
6. [Contributing](#contributing)

Migration to Leapt Froala Editor bundle from KMS
------------------------------------------------

[](#migration-to-leapt-froala-editor-bundle-from-kms)

It now supports only Symfony 6.4+, 7.0+ & 8.0+, and PHP >= 8.2. Symfony 5.3 is supported in v1.0.0, but its support has been dropped in v1.1.0. Symfony < 6.4 is supported in v1.4.0, but its support has been dropped in v1.5.0.

Replace occurrences of "kms" by "leapt" everywhere (matching case: `KMS` becomes `Leapt` & `kms` becomes `leapt`).

Available demo
--------------

[](#available-demo)

If you want to try the bundle before installing it in your own projects, you can run this demo project locally:

Installation
------------

[](#installation)

### Step 1: Install the bundle using composer

[](#step-1-install-the-bundle-using-composer)

```
composer require leapt/froala-editor-bundle
```

Note: if you install the bundle using Symfony Flex & accepted the recipe, you can skip steps 2 to 4.

### Step 2: Add the bundle to your bundles.php

[](#step-2-add-the-bundle-to-your-bundlesphp)

```
// config/bundles.php
return [
    //..
    Leapt\FroalaEditorBundle\LeaptFroalaEditorBundle::class => ['all' => true],
];
```

### Step 3: Import routes

[](#step-3-import-routes)

```
# config/routes.yaml
leapt_froala_editor:
    resource: '@LeaptFroalaEditorBundle/Resources/config/routing.php'
    prefix:   /froalaeditor
```

### Step 4: Load Twig form widget

[](#step-4-load-twig-form-widget)

```
# In config/packages/twig.yaml
twig:
    form_themes:
        - '@LeaptFroalaEditor/Form/froala_widget.html.twig'
```

### Step 5: Configure the bundle

[](#step-5-configure-the-bundle)

#### Required

[](#required)

First, you have to select your language, other settings are optional (see below).

```
# config/packages/leapt_froala_editor.yaml
leapt_froala_editor:
    language: 'nl'
```

#### Other options

[](#other-options)

All Froala options ([list provided here](https://www.froala.com/wysiwyg-editor/docs/options)) are supported. Just add the option name (prefixed with `froala_` if it's in your form type) with your value. If you want to keep Froala default value, don't provide anything in your config file. For options which require an array, provide a value array. For options which require an object, provide a key/value array.

Note that some options need some plugins (all information provided in the [Froala documentation](https://www.froala.com/wysiwyg-editor/docs/options)).

Example for each option type below:

```
# config/packages/leapt_froala_editor.yaml
leapt_froala_editor:
    toolbarInline: true
    tableColors: [ '#FFFFFF', '#FF0000' ]
    saveParams: { "id" : "myEditorField" }
```

To provide a better integration with Symfony, some custom options are added, see the full list below:

```
# config/packages/leapt_froala_editor.yaml
leapt_froala_editor:
    # Froala licence number if you want to use a purchased licence.
    serialNumber: 'XXXX-XXXX-XXXX'

    # Disable CodeMirror inclusion.
    includeCodeMirror: false

    # Disable Font Awesome inclusion.
    includeFontAwesome: false

    # Disable all bundle JavaScript inclusion (not concerning CodeMirror).
    # Usage: if you are using Grunt or Webpack or other, and you want to include yourself all scripts.
    includeJS: false

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

    # Change the froala base path.
    # Useful eg. when you load it from your own public directory.
    # Defaults to "/bundles/leaptfroalaeditor/froala_editor"
    basePath: '/my/custom/path'

    # Custom JS file.
    # Usage: add custom plugins/buttons...
    customJS: '/custom/js/path'
```

### Step 6: Add Froala to your form

[](#step-6-add-froala-to-your-form)

Just add a Froala type in your form:

```
use Leapt\FroalaEditorBundle\Form\Type\FroalaEditorType;

$builder->add('field', FroalaEditorType::class);
```

All configuration items can be overridden:

```
$builder->add('field', FroalaEditorType::class, [
    'froala_language'      => 'fr',
    'froala_toolbarInline' => true,
    'froala_tableColors'   => ['#FFFFFF', '#FF0000'],
    'froala_saveParams'    => ['id' => 'myEditorField'],
]);
```

### Step 7: Install asset files

[](#step-7-install-asset-files)

To install the asset files, there is `froala:install` command that downloads the last version available of Froala Editor and puts it by default in the `vendor/leapt/froala-editor-bundle/src/Resources/public/froala_editor/` directory:

```
bin/console froala:install
```

There are a few arguments/options available:

- First (and only) argument (optional): the absolute path where the files will be put after download. Defaults to `vendor/leapt/froala-editor-bundle/src/Resources/public/froala_editor/`.
- Option `tag`: the version of Froala that will be installed (eg. `v4.0.1`). Defaults to `master`.
- Option `clear` (no value expected, disabled by default): Allow the command to clear a previous install if the path already exists.

After you launched the install command, you have to link assets, eg.:

```
bin/console assets:install --symlink public
```

### Step 8: Display editor content

[](#step-8-display-editor-content)

#### Manually

[](#manually)

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

```

```

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

```

    {{ myContentHtml|raw }}

```

#### Using the Twig extension

[](#using-the-twig-extension)

To use the Twig extension, simply call the display function (note that the front CSS file is not included if the parameter includeCSS is false):

```
{{ froala_display(myContentHtml) }}
```

### Step 9: Profiles (custom configurations)

[](#step-9-profiles-custom-configurations)

You can define several configuration profiles that will be reused in your forms, without repeating these configurations.

When using a profile, the root configuration options will be used & overridden:

```
# config/packages/leapt_froala_editor.yaml
leapt_froala_editor:
    heightMax: 400
    attribution: false
    profiles:
        profile_1:
            heightMax: 500
```

```
use Leapt\FroalaEditorBundle\Form\Type\FroalaEditorType;

$builder->add('field', FroalaEditorType::class, [
    'froala_profile' => 'profile_1',
]);
```

In this example, `profile_1` profile will have these configuration options set:

- `heightMax`: 500
- `attribution`: false

More configuration
------------------

[](#more-configuration)

### Plugins

[](#plugins)

All [Froala plugins](https://www.froala.com/wysiwyg-editor/docs/plugins) are enabled, but if you don't need one of them, you can disable some plugins...

```
# config/packages/leapt_froala_editor.yaml
leapt_froala_editor:
    # Disable some plugins.
    pluginsDisabled: [ 'save', 'fullscreen' ]
```

... or chose only plugins to enable:

```
# config/packages/leapt_froala_editor.yaml
leapt_froala_editor:
    # Enable only some plugins.
    pluginsEnabled: [ 'image', 'file' ]
```

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

### Concept: Image upload/manager

[](#concept-image-uploadmanager)

This bundle provides an integration of the [Froala image upload concept](https://www.froala.com/wysiwyg-editor/docs/concepts/image/upload) 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 (if you need to do that, please explain me why to improve the provided uploader).

To provide a better integration with Symfony, some custom options are added, see the full list below:

```
# config/packages/leapt_froala_editor.yaml
leapt_froala_editor:
    # The image upload folder in your /web directory.
    # Default: "/upload".
    imageUploadFolder: '/my/upload/folder'

    # The image upload URL base.
    # Usage: if you are using URL rewriting for your assets.
    # Default: same value as provided as folder.
    imageUploadPath: '/my/upload/path'
```

### Concept: File upload

[](#concept-file-upload)

This bundle provides an integration of the [Froala file upload concept](https://www.froala.com/wysiwyg-editor/docs/concepts/file/upload) 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 (if you need to do that, please explain me why to improve the provided uploader).

To provide a better integration with Symfony, some custom options are added, see the full list below:

```
# config/packages/leapt_froala_editor.yaml
leapt_froala_editor:
    # The file upload folder in your /web directory.
    # Default: "/upload".
    fileUploadFolder: '/my/upload/folder'

    # The file upload URL base.
    # Usage: if you are using URL rewritting for your assets.
    # Default: same value as provided as folder.
    fileUploadPath: '/my/upload/path'

    # Your public directory, from the root directory.
    # Default: "/public"
    publicDir: '/home'
```

### Concept: Auto-save

[](#concept-auto-save)

The [Froala auto-save concept](https://www.froala.com/wysiwyg-editor/docs/concepts/save/autosave) to automatically request a save action on your server is working, just enter the correct options in your configuration file:

```
# config/packages/leapt_froala_editor.yaml
leapt_froala_editor:
    saveURL: 'my_save_route'
    saveInterval: 2500
    saveParam: "content"
```

To provide a better integration with Symfony, some custom options are added, see the full list below:

```
# config/packages/leapt_froala_editor.yaml
leapt_froala_editor:
    # Add some parameters to your save URL.
    # Usage: if you need parameters to generate your save action route (see save explaination below).
    # Default: null.
    saveURLParams: { "id" : "myId" }
```

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

### Webpack Encore configuration

[](#webpack-encore-configuration)

If you want to load Froala asset files using npm/yarn and Webpack Encore, here's how to do it:

```
import FroalaEditor from 'froala-editor';
import 'froala-editor/css/froala_editor.pkgd.min.css';
import 'froala-editor/css/froala_style.min.css';

// Load your languages
import 'froala-editor/js/languages/fr.js';

// Load all plugins, or specific ones
import 'froala-editor/js/plugins.pkgd.min.js';
import 'froala-editor/css/plugins.pkgd.min.css';

window.FroalaEditor = FroalaEditor;

/**
 * @param editor Editor instance
 * @param error Error object generated by Froala
 * @param response Response object coming from the server
 */
function froalaDisplayError(editor, error, response) {
    alert(`Error ${error.code}: ${error.message}`);
}

window.froalaDisplayError = froalaDisplayError;
```

Instead of defining a generic `froalaDisplayError` function, you can also define one per error event, using these function names:

- `froalaImageErrorEventHandler`
- `froalaImageManagerErrorEventHandler`
- `froalaSaveErrorEventHandler`
- `froalaFileErrorEventHandler`
- `froalaVideoErrorEventHandler`

Now you can disable Froala bundle CSS/JS inclusion:

```
# config/packages/leapt_froala_editor.yaml
leapt_froala_editor:
    includeJS: false
    includeCSS: false
```

Don't forget to import the generated Encore CSS/JS files in your HTML if needed.

TODO
----

[](#todo)

- Add some tests

Licence
-------

[](#licence)

This bundle provides an integration of the WYSIWYG [Froala Editor](https://www.froala.com/wysiwyg-editor) commercial version. Please read the [Froala licence agreement](https://www.froala.com/wysiwyg-editor/terms) and go to the [pricing page](https://www.froala.com/wysiwyg-editor/pricing)if you don't have a licence.

Contributing
------------

[](#contributing)

Feel free to contribute, like sending [pull requests](https://github.com/leapt/froala-editor-bundle/pulls) to add features/tests.

Note there are a few helpers to maintain code quality, that you can run using these commands:

```
composer cs:dry # Code style check
composer phpstan # Static analysis
vendor/bin/phpunit # Run tests
```

###  Health Score

49

—

FairBetter than 95% of packages

Maintenance56

Moderate activity, may be stable

Popularity39

Limited adoption so far

Community18

Small or concentrated contributor base

Maturity70

Established project with proven stability

 Bus Factor1

Top contributor holds 60% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~118 days

Recently: every ~147 days

Total

13

Last Release

227d ago

PHP version history (2 changes)v1.0.0PHP ^8.0

v1.5.0PHP ^8.2

### Community

Maintainers

![](https://www.gravatar.com/avatar/ae7ce9ceaf36b7aa89ec7bb76911d5d07e7c691bd9a4e40c9342c998f86248db?d=identicon)[leapt](/maintainers/leapt)

---

Top Contributors

[![jmsche](https://avatars.githubusercontent.com/u/3929498?v=4)](https://github.com/jmsche "jmsche (63 commits)")[![Parashuram-Sram](https://avatars.githubusercontent.com/u/42605654?v=4)](https://github.com/Parashuram-Sram "Parashuram-Sram (10 commits)")[![stefanneculai](https://avatars.githubusercontent.com/u/637004?v=4)](https://github.com/stefanneculai "stefanneculai (7 commits)")[![dianaprajescu](https://avatars.githubusercontent.com/u/1551136?v=4)](https://github.com/dianaprajescu "dianaprajescu (6 commits)")[![mpoiriert](https://avatars.githubusercontent.com/u/4175616?v=4)](https://github.com/mpoiriert "mpoiriert (4 commits)")[![dheerajaccolite](https://avatars.githubusercontent.com/u/47217695?v=4)](https://github.com/dheerajaccolite "dheerajaccolite (4 commits)")[![kapil2704](https://avatars.githubusercontent.com/u/47421622?v=4)](https://github.com/kapil2704 "kapil2704 (4 commits)")[![benatespina](https://avatars.githubusercontent.com/u/3951376?v=4)](https://github.com/benatespina "benatespina (2 commits)")[![UFTimmy](https://avatars.githubusercontent.com/u/7061770?v=4)](https://github.com/UFTimmy "UFTimmy (2 commits)")[![fabianfabian](https://avatars.githubusercontent.com/u/343640?v=4)](https://github.com/fabianfabian "fabianfabian (1 commits)")[![VaShu](https://avatars.githubusercontent.com/u/2881266?v=4)](https://github.com/VaShu "VaShu (1 commits)")[![gsaulmon](https://avatars.githubusercontent.com/u/730440?v=4)](https://github.com/gsaulmon "gsaulmon (1 commits)")

---

Tags

bundlehacktoberfestphpsymfonysymfony-bundleeditorwysiwygfroala

###  Code Quality

TestsPHPUnit

Static AnalysisPHPStan

Code StylePHP CS Fixer

Type Coverage Yes

### Embed Badge

![Health badge](/badges/leapt-froala-editor-bundle/health.svg)

```
[![Health](https://phpackages.com/badges/leapt-froala-editor-bundle/health.svg)](https://phpackages.com/packages/leapt-froala-editor-bundle)
```

###  Alternatives

[sylius/sylius

E-Commerce platform for PHP, based on Symfony framework.

8.4k5.6M651](/packages/sylius-sylius)[prestashop/prestashop

PrestaShop is an Open Source e-commerce platform, committed to providing the best shopping cart experience for both merchants and customers.

9.0k15.4k](/packages/prestashop-prestashop)[shopware/platform

The Shopware e-commerce core

3.3k1.5M3](/packages/shopware-platform)[netgen/layouts-core

Netgen Layouts enables you to build and manage complex web pages in a simpler way and with less coding. This is the core of Netgen Layouts, its heart and soul.

3689.4k10](/packages/netgen-layouts-core)[sulu/sulu

Core framework that implements the functionality of the Sulu content management system

1.3k1.3M152](/packages/sulu-sulu)[contao/core-bundle

Contao Open Source CMS

1231.6M2.4k](/packages/contao-core-bundle)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)