{"id":18307910,"url":"https://github.com/froala/kmsfroalaeditorbundle","last_synced_at":"2025-04-04T17:11:03.597Z","repository":{"id":22894293,"uuid":"26242654","full_name":"froala/KMSFroalaEditorBundle","owner":"froala","description":"Symfony bundle for Froala WYSIWYG HTML Rich Text Editor.","archived":false,"fork":false,"pushed_at":"2024-07-15T15:52:59.000Z","size":9086,"stargazers_count":105,"open_issues_count":13,"forks_count":33,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-03-28T16:11:32.732Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://froala.com/wysiwyg-editor","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/froala.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG-4.x.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2014-11-05T22:28:32.000Z","updated_at":"2024-07-16T12:17:54.000Z","dependencies_parsed_at":"2024-06-18T21:31:59.206Z","dependency_job_id":"c5f332a1-7c2b-422f-acee-d9f65e87facf","html_url":"https://github.com/froala/KMSFroalaEditorBundle","commit_stats":{"total_commits":292,"total_committers":19,"mean_commits":"15.368421052631579","dds":0.5787671232876712,"last_synced_commit":"33bec4f3cce81951bd9c61214a989d207bb47412"},"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/froala%2FKMSFroalaEditorBundle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/froala%2FKMSFroalaEditorBundle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/froala%2FKMSFroalaEditorBundle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/froala%2FKMSFroalaEditorBundle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/froala","download_url":"https://codeload.github.com/froala/KMSFroalaEditorBundle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247217222,"owners_count":20903009,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-05T16:05:52.077Z","updated_at":"2025-04-04T17:11:03.578Z","avatar_url":"https://github.com/froala.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# KMSFroalaEditorBundle\n\n[![Package version](https://img.shields.io/packagist/v/kms/froala-editor-bundle.svg)](https://packagist.org/packages/kms/froala-editor-bundle)\n[![Build Status](https://img.shields.io/github/workflow/status/froala/KMSFroalaEditorBundle/Continuous%20Integration/master)](https://github.com/froala/KMSFroalaEditorBundle/actions?query=workflow%3A%22Continuous+Integration%22)\n[![Downloads](https://img.shields.io/packagist/dt/kms/froala-editor-bundle.svg)](https://packagist.org/packages/kms/froala-editor-bundle)\n[![PHP Version](https://img.shields.io/packagist/php-v/kms/froala-editor-bundle.svg)](https://packagist.org/packages/kms/froala-editor-bundle)\n[![Licence](https://img.shields.io/packagist/l/kms/froala-editor-bundle.svg)](https://packagist.org/packages/kms/froala-editor-bundle)\n\n## Introduction\n\nThis bundle aims to easily integrate \u0026 use the Froala editor in Symfony 4.4+/5.0+.\n\nIf you want to use it with Symfony \u003c 4.3, see [v2 docs](https://github.com/froala/KMSFroalaEditorBundle/tree/v2).\nv2.x is compatible with Symfony 2.x to 4.x, but some deprecations are not fixed and static files are integrated to the\nbundle.\n\n[There's also a v3 version available](https://github.com/froala/KMSFroalaEditorBundle/tree/v3) compatible\nwith Symfony 4.3+/5.0+ but the form type options are not prefixed with `froala_`, which is the major reason for a v4\nof the bundle.\n\nThe changelogs are available here:\n\n* [CHANGELOG-4.x.md](CHANGELOG-4.x.md)\n* [CHANGELOG-3.x.md](https://github.com/froala/KMSFroalaEditorBundle/blob/v3/CHANGELOG-3.x.md).\n\n## Table of Contents\n\n1. [Migration to Froala Editor bundle v4 from v3](#migration-to-froala-editor-bundle-v4-from-v3)\n1. [Installation](#installation)\n    1. [Step 1: Install the bundle using composer](#step-1-install-the-bundle-using-composer)\n    1. [Step 2: Add the bundle to your bundles.php](#step-2-add-the-bundle-to-your-bundlesphp)\n    1. [Step 3: Import routes](#step-3-import-routes)\n    1. [Step 4: Load Twig form widget](#step-4-load-twig-form-widget)\n    1. [Step 5: Configure the bundle](#step-5-configure-the-bundle)\n        1. [Required](#required)\n        1. [Other options](#other-options)\n    1. [Step 6: Add Froala to your form](#step-6-add-froala-to-your-form)\n    1. [Step 7: Install asset files](#step-7-install-asset-files)\n    1. [Step 8: Display editor content](#step-8-display-editor-content)\n        1. [Manually](#manually)\n        1. [Using the Twig extension](#using-the-twig-extension)\n    1. [Step 9: Profiles (custom configurations)](#step-9-profiles-custom-configurations)\n1. [More configuration](#more-configuration)\n    1. [Plugins](#plugins)\n    1. [Concept: Image upload/manager](#concept-image-uploadmanager)\n    1. [Concept: File upload](#concept-file-upload)\n    1. [Concept: Autosave](#concept-autosave)\n    1. [Webpack Encore configuration](#webpack-encore-configuration)\n1. [TODO](#todo)\n1. [Licence](#licence)\n1. [Contributing](#contributing)\n\n## Migration to Froala Editor bundle v4 from v3\n\nIt now supports only Symfony 4.4+ \u0026 5.0+.\n\nIf you somehow override/inherit a class from the bundle, be careful as some parameter \u0026 return types have been added.\n\nAll form type options must now be prefixed by `froala_`:\n\n```php\n// Before\n$builder-\u003eadd('field', FroalaEditorType::class, [\n    'toolbarButtons' =\u003e [...],\n]);\n\n// After\n$builder-\u003eadd('field', FroalaEditorType::class, [\n    'froala_toolbarButtons' =\u003e [...],\n]);\n```\n\n## Installation\n\n### Step 1: Install the bundle using composer\n\n```bash\ncomposer require kms/froala-editor-bundle\n```\n\nNote: if you install the bundle using Symfony Flex \u0026 accepted the recipe, you can skip steps 2 to 4.\n\n### Step 2: Add the bundle to your bundles.php\n\n```php\n// config/bundles.php\nreturn [\n    //..\n    KMS\\FroalaEditorBundle\\KMSFroalaEditorBundle::class =\u003e ['all' =\u003e true],\n];\n```\n\n### Step 3: Import routes\n\n```yaml\n# config/routes.yaml \nkms_froala_editor:\n    resource: '@KMSFroalaEditorBundle/Resources/config/routing.yml'\n    prefix:   /froalaeditor\n```\n\n### Step 4: Load Twig form widget\n\n```yaml\n# In config/packages/twig.yaml\ntwig:\n    form_themes:\n        - '@KMSFroalaEditor/Form/froala_widget.html.twig'\n```\n\n### Step 5: Configure the bundle\n\n#### Required\n\nFirst, you have to select your language, other settings are optional (see below).\n\n```yaml\n# config/packages/kms_froala_editor.yaml \nkms_froala_editor:\n    language: 'nl'\n```\n\n#### Other options\n\nAll Froala options ([list provided here](https://www.froala.com/wysiwyg-editor/docs/options)) are supported.\nJust add the option name (prefixed with `froala_` if it's in your form type) with your value.\nIf you want to keep Froala default value, don't provide anything in your config file.\nFor options which require an array, provide a value array.\nFor options which require an object, provide a key/value array.\n\nNote that some options need some plugins (all information provided in the [Froala documentation](https://www.froala.com/wysiwyg-editor/docs/options)).\n\nExample for each option type below:\n\n```yaml\n# config/packages/kms_froala_editor.yaml\nkms_froala_editor:\n    toolbarInline: true\n    tableColors: [ \"#FFFFFF\", \"#FF0000\" ]\n    saveParams: { \"id\" : \"myEditorField\" }\n```\n\nTo provide a better integration with Symfony, some custom options are added, see the full list below: \n\n```yaml\n# config/packages/kms_froala_editor.yaml\nkms_froala_editor:\n    # Froala licence number if you want to use a purchased licence.\n    serialNumber: \"XXXX-XXXX-XXXX\"\n\n    # Disable CodeMirror inclusion.\n    includeCodeMirror: false\n\n    # Disable Font Awesome inclusion.\n    includeFontAwesome: false\n\n    # Disable all bundle javascripts inclusion (not concerning CodeMirror).\n    # Usage: if you are using Grunt or other and you want to include yourself all scripts. \n    includeJS: false\n\n    # Disable all bundle CSS inclusion (not concerning Font Awesome nor CodeMirror).\n    # Usage: if you are using Grunt or other and you want to include yourself all stylesheets. \n    includeCSS: false\n\n    # Change the froala base path.\n    # Useful eg. when you load it from your own public directory.\n    # Defaults to \"/bundles/kmsfroalaeditor/froala_editor\"\n    basePath: \"/my/custom/path\".\n\n    # Custom JS file.\n    # Usage: add custom plugins/buttons...\n    customJS: \"/custom/js/path\"\n```\n\n### Step 6: Add Froala to your form\n\nJust add a Froala type in your form:\n\n```php\nuse KMS\\FroalaEditorBundle\\Form\\Type\\FroalaEditorType;\n\n$builder-\u003eadd('field', FroalaEditorType::class);\n```\n\nAll configuration items can be overridden:\n\n```php\n$builder-\u003eadd('field', FroalaEditorType::class, [\n    'froala_language'      =\u003e 'fr',\n    'froala_toolbarInline' =\u003e true,\n    'froala_tableColors'   =\u003e ['#FFFFFF', '#FF0000'],\n    'froala_saveParams'    =\u003e ['id' =\u003e 'myEditorField'],\n]);\n```\n\n### Step 7: Install asset files\n\nTo install the asset files, there is `froala:install` command that downloads the last version available of Froala Editor\nand puts it by default in the `vendor/kms/froala-editor-bundle/src/Resources/public/froala_editor/` directory:\n\n```bash\nbin/console froala:install\n```\n\nThere are a few arguments/options available:\n\n* First (and only) argument (optional): the absolute path where the files will be put after download.\nDefaults to `vendor/kms/froala-editor-bundle/src/Resources/public/froala_editor/`.\n* Option `tag`: the version of Froala that will be installed (eg. `v3.0.1`). Defaults to `master`.\n* Option `clear` (no value expected, disabled by default): Allow the command to clear a previous install if the path already exists.\n\nAfter you launched the install command, you have to link assets, eg.:\n\n```bash\nbin/console assets:install --symlink public\n```\n\n### Step 8: Display editor content\n\n#### Manually\n\nTo preserve the look of the edited HTML outside of the editor you have to include the following CSS files:\n\n```twig\n\u003c!-- CSS rules for styling the element inside the editor such as p, h1, h2, etc. --\u003e\n\u003clink href=\"../css/froala_style.min.css\" rel=\"stylesheet\" type=\"text/css\" /\u003e\n```\n\nAlso, you should make sure that you put the edited content inside an element that has the class fr-view:\n\n```twig\n\u003cdiv class=\"fr-view\"\u003e\n    {{ myContentHtml|raw }}\n\u003c/div\u003e\n```\n\n#### Using the Twig extension\n\nTo use the Twig extension, simply call the display function (note that the front CSS file is not included\nif the parameter includeCSS is false):\n\n```twig\n{{ froala_display(myContentHtml) }}\n```\n\n### Step 9: Profiles (custom configurations)\n\nYou can define several configuration profiles that will be reused in your forms, without repeating these configurations.\n\nWhen using a profile, the root configuration options will be used \u0026 overridden:\n\n```yaml\n# config/packages/kms_froala_editor.yaml\nkms_froala_editor:\n    heightMax: 400\n    attribution: false\n    profiles:\n        profile_1:\n            heightMax: 500\n```\n\n```php\nuse KMS\\FroalaEditorBundle\\Form\\Type\\FroalaEditorType;\n\n$builder-\u003eadd('field', FroalaEditorType::class, [\n    'froala_profile' =\u003e 'profile_1',\n]);\n```\n\nIn this example, `profile_1` profile will have these configuration options set:\n\n* `heightMax`: 500\n* `attribution`: false\n\n## More configuration\n\n### Plugins\n\nAll [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...\n\n```yaml\n# config/packages/kms_froala_editor.yaml\nkms_froala_editor:\n    # Disable some plugins.\n    pluginsDisabled: [ \"save\", \"fullscreen\" ]\n```\n... or chose only plugins to enable:\n\n```yaml\n# config/packages/kms_froala_editor.yaml\nkms_froala_editor:\n    # Enable only some plugins.\n    pluginsEnabled: [ \"image\", \"file\" ]\n```\n\nPlugins can be enabled/disabled for each Froala instance by passing the same array in the form builder.\n\n### Concept: Image upload/manager\n\nThis 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).\n\nIf 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).\n\nTo provide a better integration with Symfony, some custom options are added, see the full list below: \n\n```yaml\n# config/packages/kms_froala_editor.yaml\nkms_froala_editor:\n    # The image upload folder in your /web directory.\n    # Default: \"/upload\".\n    imageUploadFolder: \"/my/upload/folder\"\n\n    # The image upload URL base.\n    # Usage: if you are using URL rewritting for your assets.\n    # Default: same value as provided as folder.\n    imageUploadPath: \"/my/upload/path\"\n```\n\n### Concept: File upload\n\nThis 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).\n\nIf 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).\n\nTo provide a better integration with Symfony, some custom options are added, see the full list below: \n\n```yaml\n# config/packages/kms_froala_editor.yaml\nkms_froala_editor:\n    # The file upload folder in your /web directory.\n    # Default: \"/upload\".\n    fileUploadFolder: \"/my/upload/folder\"\n\n    # The file upload URL base.\n    # Usage: if you are using URL rewritting for your assets.\n    # Default: same value as provided as folder.\n    fileUploadPath: \"/my/upload/path\"\n\n    # Your public directory, from the root directory.\n    # Default: \"/public\"\n    publicDir: \"/home\"\n```\n\n### Concept: Autosave\n\nThe [Froala autosave 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:\n\n```yaml\n# config/packages/kms_froala_editor.yaml\nkms_froala_editor:\n    saveURL: \"my_save_route\"\n    saveInterval: 2500\n    saveParam: \"content\"\n```\n\nTo provide a better integration with Symfony, some custom options are added, see the full list below: \n\n```yaml\n# config/packages/kms_froala_editor.yaml\nkms_froala_editor:\n    # Add some parameters to your save URL.\n    # Usage: if you need parameters to generate your save action route (see save explaination below).\n    # Default: null.\n    saveURLParams: { \"id\" : \"myId\" }\n```\n\nYou can add some parameters in your save route (see custom options).\n\n### Webpack Encore configuration\n\nIf you want to load Froala asset files using npm/yarn and Webpack Encore, here's how to do it:\n\n```javascript\nimport FroalaEditor from 'froala-editor';\nimport 'froala-editor/css/froala_editor.pkgd.min.css';\nimport 'froala-editor/css/froala_style.min.css';\n\n// Load your languages\nimport 'froala-editor/js/languages/fr.js';\n\n// Load all plugins, or specific ones\nimport 'froala-editor/js/plugins.pkgd.min.js';\nimport 'froala-editor/css/plugins.pkgd.min.css';\n\nwindow.FroalaEditor = FroalaEditor;\n\nfunction froalaDisplayError(p_editor, error ) {\n    alert(`Error ${error.code}: ${error.message}`);\n}\n\nwindow.froalaDisplayError = froalaDisplayError;\n```\n\nNow you can disable Froala bundle CSS/JS inclusion:\n\n```yaml\n# config/packages/kms_froala_editor.yaml\nkms_froala_editor:\n    includeJS: false\n    includeCSS: false\n```\n\nDon't forget to import the generated Encore CSS/JS files in your HTML if needed.\n\n## TODO\n\n- Add some tests\n\n## Licence\n\nThis bundle provides an integration of the WYSIWYG [Froala Editor](https://www.froala.com/wysiwyg-editor) commercial version.\nPlease 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)\nif you don't have a licence.\n\n## Contributing\n\nFeel free to contribute, like sending [pull requests](https://github.com/froala/KMSFroalaEditorBundle/pulls) to add features/tests.\n\nNote there are a few helpers to maintain code quality, that you can run using these commands:\n\n```bash\ncomposer cs:dry # Code style check\ncomposer phpstan # Static analysis\nvendor/bin/simple-phpunit # Run tests\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffroala%2Fkmsfroalaeditorbundle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffroala%2Fkmsfroalaeditorbundle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffroala%2Fkmsfroalaeditorbundle/lists"}