emileperron / tinymce-bundle
A Symfony bundle to add TinyMCE in your apps and forms.
Installs: 462
Dependents: 0
Suggesters: 0
Security: 0
Stars: 2
Watchers: 0
Forks: 1
Open Issues: 2
Language:JavaScript
Type:symfony-bundle
Requires
- php: ^8.1
- symfony/asset: ^4.0|^5.0|^6.0|^7.0
- symfony/dependency-injection: ^4.0|^5.0|^6.0|^7.0
- symfony/form: ^4.0|^5.0|^6.0|^7.0
- symfony/http-foundation: ^4.0|^5.0|^6.0|^7.0
- symfony/http-kernel: ^4.0|^5.0|^6.0|^7.0
- symfony/routing: ^4.0|^5.0|^6.0|^7.0
- twig/twig: ^3.3
Requires (Dev)
- friendsofphp/php-cs-fixer: ^3.55
- phpmd/phpmd: ^2.15
- phpstan/extension-installer: ^1.3
- phpstan/phpstan: ^1.10
- phpstan/phpstan-symfony: ^1.3
- phpunit/phpunit: ^9.16|^10.5|^11.1
- vincentlanglet/twig-cs-fixer: ^2.8
This package is auto-updated.
Last update: 2024-12-20 02:14:50 UTC
README
This is a fork of eckinox/tinymce-bundle. Both packages were created by myself, but since I left Eckinox the original bundle has been treated more like an internal package rather than a public & open-source package, so I created this fork to keep supporting the community.
Getting started
1. Install this package via Composer
composer require emileperron/tinymce-bundle
2. Start using TinyMCE!
Using TinyMCE in Symfony forms
Adding a TinyMCE editor in your Symfony forms works like any other form types:
public function buildForm(FormBuilderInterface $builder, array $options): void { $builder->add("comment", TinymceType::class, [ "attr" => [ "toolbar" => "bold italic underline | bullist numlist", ], ]) // ...
Using TinyMCE in templates
To render a TinyMCE editor in Twig without using Symfony forms, you can use the
tinymce()
Twig function that is provided by this bundle.
Simply provide the value as the first argument and you're good to go.
You can also use the second argument to specify attributes to add to the element.
Here is an example:
{{ tinymce("<p>This is a note</p>", { name: "notes", skin: "oxide" }) }}
Using TinyMCE in Javascript
To render a TinyMCE editor in Javascript, first ensure that the main TinyMCE script is loaded.
If you already use the tinymce()
Twig function or the TinymceType
on the page,
the scripts are already loaded. Otherwise, you can include them on the page either
by adding the following scripts manually:
<script src="{{ asset('bundles/tinymce/ext/tinymce/tinymce.min.js') }}"></script> <script src="{{ asset('bundles/tinymce/ext/tinymce-webcomponent.js') }}" type="module"></script>
or by using the tinymce_scripts()
function like so:
{{ tinymce_scripts() }}
Then, all you have to do is add a TinyMCE editor web element on the page with the desired attributes and value.
Here's is an example:
const contentText = document.createTextNode("<p>Your original text goes here</p>"); const editor = document.createElement("tinymce-editor"); editor.append(contentText); editor.setAttribute("skin", "appstack"); // If you want to use your default configurations, uncomment this /* const attrs = {{ tinymce_attributes({ menubar: "format" })|json_encode|raw }}; for (const key in attrs) { editor.setAttribute(key, attrs[key]); } */ // Add the editor to the page document.body.append(editor);
You can refer to Tiny's web component documentation for more information.
Configuring TinyMCE
This bundle includes and uses the web component version of TinyMCE.
You can configure TinyMCE by setting HTML attributes on the editor element itself (<tinymce-editor>
).
When using the form type, you can use the attr
option to set the attributes.
For example, you can set the toolbar's actions like so:
public function buildForm(FormBuilderInterface $builder, array $options): void { $builder->add("comment", TinymceType::class, [ "attr" => [ "toolbar" => "bold italic underline | bullist numlist", ], ]) // ...
For more information on the different configurations that TinyMCE offers, refer to Tiny's web component documentation.
Default configurations
You can set the following default options in a configuration file:
tinymce: # The configurations mirror the TinyMCE attributes. # Learn more about each option in Tiny's documentation: # https://www.tiny.cloud/docs/tinymce/6/webcomponent-ref/ skin: "oxide" content_css: "default" content_style: "" config: "tinymceAdditionalConfig" plugins: "advlist autolink link image media table lists" toolbar: "bold italic underline | bullist numlist" toolbar_mode: "" menubar: "" contextmenu: "" quickbars_insert_toolbar: "" quickbars_selection_toolbar: "" resize: "" icons: "" icons_url: "" setup: "" images_upload_url: "https://yoursite.com/upload" images_upload_route: "" images_upload_route_params: "" images_upload_handler: "" images_upload_base_path: "" images_upload_credentials: "true" images_reuse_filename: "" powerpaste_word_import: "" powerpaste_html_import: "" powerpaste_allow_local_images: ""
Using your configuration in Twig templates
If you need to use your configurations in a Twig template, you can use the
tinymce_attributes()
function, which accepts an optional array of custom
attributes that take priority over the default configuration.
Here is an example:
const attrs = {{ tinymce_attributes({ menubar: "format" })|json_encode|raw }}; for (const key in attrs) { editor.setAttribute(key, attrs[key]); }
File uploads (optional)
File uploads are not handled by default, as the process will vary from project to project.
To set this up, take a look at Tiny's web component file upload documentation.
To help you get started, we have provided an example of what the implementation may look like.
You can find this example in docs/file-upload-example.md
.
Commercial TinyMCE License Key
By default, this bundle sets you up to use the GPL licensed version of TinyMCE.
If you have a commercial license that you would like to use instead, you must
provide the license_key
to the global TinyMCE configuration extras, like so:
window.tinymceAdditionalConfig = { license_key: "<your-license-key-here>", };
AssetMapper support
Support for Symfony's AssetMapper is built-in to this bundle since v2.1. No additional configuration is required on your end.
When AssetMapper is used, the TinyMCE files are automatically excluded from being compiled as part of Asset Mapper, as the versioning hash that Asset Mapper automatically adds to filenames and URLs is incompatible with the runtime script imports that are core to TinyMCE.
AppStack skin
This bundle comes with an appstack
skin, which matches the style of the
AppStack Bootstrap template.
This skin is an extension of the tinymce-5, and it has dark mode support built-in.
To use it, simply specify it in your configuration:
# config/packages/tinymce.yaml tinymce: skin: appstack content_css: appstack
Versions
Contributing
Feel free to submit issues and PRs to the emileperron/tinymce-bundle repository on GitHub.
For more information on how to contribute, check out CONTRIBUTING.md.
License
This bundle is distributed under the MIT license.
TinyMCE and the TinyMCE web component are developed and distributed by Tiny® under the MIT license.