Download the PHP package leapt/froala-editor-bundle without Composer
On this page you can find all versions of the php package leapt/froala-editor-bundle. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Informations about the package froala-editor-bundle
Leapt FroalaEditor bundle
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.
The changelog is available here:
- CHANGELOG-1.x.md
Table of Contents
- Migration to Leapt Froala Editor bundle from KMS
- Installation
- Step 1: Install the bundle using composer
- Step 2: Add the bundle to your bundles.php
- Step 3: Import routes
- Step 4: Load Twig form widget
- Step 5: Configure the bundle
- Required
- Other options
- Step 6: Add Froala to your form
- Step 7: Install asset files
- Step 8: Display editor content
- Manually
- Using the Twig extension
- Step 9: Profiles (custom configurations)
- More configuration
- Plugins
- Concept: Image upload/manager
- Concept: File upload
- Concept: Autosave
- Webpack Encore configuration
- TODO
- Licence
- Contributing
Migration to Leapt Froala Editor bundle from KMS
It now supports only Symfony 6.4+ & 7.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
If you want to try the bundle before installing it in your own projects, you can run this demo project locally: https://github.com/leapt/demo
Installation
Step 1: Install the bundle using composer
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 3: Import routes
Step 4: Load Twig form widget
Step 5: Configure the bundle
Required
First, you have to select your language, other settings are optional (see below).
Other options
All Froala options (list provided here) 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).
Example for each option type below:
To provide a better integration with Symfony, some custom options are added, see the full list below:
Step 6: Add Froala to your form
Just add a Froala type in your form:
All configuration items can be overridden:
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:
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 tomaster
. - 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.:
Step 8: Display editor content
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:
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):
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:
In this example, profile_1
profile will have these configuration options set:
heightMax
: 500attribution
: false
More configuration
Plugins
All Froala plugins are enabled, but if you don't need one of them, you can disable some plugins...
... or chose only plugins to enable:
Plugins can be enabled/disabled for each Froala instance by passing the same array in the form builder.
Concept: Image upload/manager
This bundle provides an integration of the Froala image upload concept 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:
Concept: File upload
This bundle provides an integration of the Froala file upload concept 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:
Concept: Auto-save
The Froala auto-save concept to automatically request a save action on your server is working, just enter the correct options in your configuration file:
To provide a better integration with Symfony, some custom options are added, see the full list below:
You can add some parameters in your save route (see custom options).
Webpack Encore configuration
If you want to load Froala asset files using npm/yarn and Webpack Encore, here's how to do it:
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:
Don't forget to import the generated Encore CSS/JS files in your HTML if needed.
TODO
- Add some tests
Licence
This bundle provides an integration of the WYSIWYG Froala Editor commercial version. Please read the Froala licence agreement and go to the pricing page if you don't have a licence.
Contributing
Feel free to contribute, like sending pull requests to add features/tests.
Note there are a few helpers to maintain code quality, that you can run using these commands:
All versions of froala-editor-bundle with dependencies
ext-zip Version *
symfony/asset Version ^6.4 || ^7.0
symfony/console Version ^6.4 || ^7.0
symfony/framework-bundle Version ^6.4 || ^7.0
symfony/form Version ^6.4 || ^7.0
symfony/http-client Version ^6.4 || ^7.0
symfony/string Version ^6.4 || ^7.0
symfony/twig-bundle Version ^6.4 || ^7.0
twig/twig Version ^3.0