This bundle aims to easily integrate & use the Froala editor in Symfony 4.4+/5.0+.
If you want to use it with Symfony < 4.3, see v2 docs. v2.x is compatible with Symfony 2.x to 4.x, but some deprecations are not fixed and static files are integrated to the bundle.
There's also a v3 version available compatible
with Symfony 4.3+/5.0+ but the form type options are not prefixed with froala_, which is the major reason for a v4
of the bundle.
The changelogs are available here:
- Migration to Froala Editor bundle v4 from v3
- Installation
- More configuration
- TODO
- Licence
- Contributing
It now supports only Symfony 4.4+ & 5.0+.
If you somehow override/inherit a class from the bundle, be careful as some parameter & return types have been added.
All form type options must now be prefixed by froala_:
// Before
$builder->add('field', FroalaEditorType::class, [
'toolbarButtons' => [...],
]);
// After
$builder->add('field', FroalaEditorType::class, [
'froala_toolbarButtons' => [...],
]);composer require kms/froala-editor-bundleNote: if you install the bundle using Symfony Flex & accepted the recipe, you can skip steps 2 to 4.
// config/bundles.php
return [
//..
KMS\FroalaEditorBundle\KMSFroalaEditorBundle::class => ['all' => true],
];# config/routes.yaml
kms_froala_editor:
resource: '@KMSFroalaEditorBundle/Resources/config/routing.yml'
prefix: /froalaeditor# In config/packages/twig.yaml
twig:
form_themes:
- '@KMSFroalaEditor/Form/froala_widget.html.twig'First, you have to select your language, other settings are optional (see below).
# config/packages/kms_froala_editor.yaml
kms_froala_editor:
language: 'nl'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:
# config/packages/kms_froala_editor.yaml
kms_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/kms_froala_editor.yaml
kms_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 javascripts inclusion (not concerning CodeMirror).
# Usage: if 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).
# Usage: if you are using Grunt 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/kmsfroalaeditor/froala_editor"
basePath: "/my/custom/path".
# Custom JS file.
# Usage: add custom plugins/buttons...
customJS: "/custom/js/path"Just add a Froala type in your form:
use KMS\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'],
]);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/kms/froala-editor-bundle/src/Resources/public/froala_editor/ directory:
bin/console froala:installThere 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/kms/froala-editor-bundle/src/Resources/public/froala_editor/. - Option
tag: the version of Froala that will be installed (eg.v3.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.:
bin/console assets:install --symlink publicTo preserve the look of the edited HTML outside of the editor you have to include the following CSS files:
<!-- 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:
<div class="fr-view">
{{ myContentHtml|raw }}
</div>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) }}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/kms_froala_editor.yaml
kms_froala_editor:
heightMax: 400
attribution: false
profiles:
profile_1:
heightMax: 500use KMS\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: 500attribution: false
All Froala plugins are enabled, but if you don't need one of them, you can disable some plugins...
# config/packages/kms_froala_editor.yaml
kms_froala_editor:
# Disable some plugins.
pluginsDisabled: [ "save", "fullscreen" ]... or chose only plugins to enable:
# config/packages/kms_froala_editor.yaml
kms_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.
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:
# config/packages/kms_froala_editor.yaml
kms_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 rewritting for your assets.
# Default: same value as provided as folder.
imageUploadPath: "/my/upload/path"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:
# config/packages/kms_froala_editor.yaml
kms_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"The Froala autosave concept to automatically request a save action on your server is working, just enter the correct options in your configuration file:
# config/packages/kms_froala_editor.yaml
kms_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/kms_froala_editor.yaml
kms_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).
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;
function froalaDisplayError(p_editor, error ) {
alert(`Error ${error.code}: ${error.message}`);
}
window.froalaDisplayError = froalaDisplayError;Now you can disable Froala bundle CSS/JS inclusion:
# config/packages/kms_froala_editor.yaml
kms_froala_editor:
includeJS: false
includeCSS: falseDon't forget to import the generated Encore CSS/JS files in your HTML if needed.
- Add some tests
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.
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:
composer cs:dry # Code style check
composer phpstan # Static analysis
vendor/bin/simple-phpunit # Run tests
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
