{"id":18745678,"url":"https://github.com/eckinox/tinymce-bundle","last_synced_at":"2025-04-12T21:33:02.279Z","repository":{"id":40419230,"uuid":"488650347","full_name":"eckinox/tinymce-bundle","owner":"eckinox","description":"TinyMCE 6 integration for your Symfony apps and forms","archived":false,"fork":false,"pushed_at":"2024-04-30T13:03:01.000Z","size":2245,"stargazers_count":27,"open_issues_count":7,"forks_count":2,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-03-26T16:01:41.824Z","etag":null,"topics":["symfony-bundle","tinymce","tinymce-web-component"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eckinox.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","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":"2022-05-04T15:48:52.000Z","updated_at":"2025-02-04T14:32:37.000Z","dependencies_parsed_at":"2024-02-19T19:09:48.523Z","dependency_job_id":"661c3027-0d80-4e80-b62d-382693aba3c1","html_url":"https://github.com/eckinox/tinymce-bundle","commit_stats":{"total_commits":16,"total_committers":2,"mean_commits":8.0,"dds":0.125,"last_synced_commit":"20ba97bf930f6bc63f17ec7dd0a6d1400e7e7dd5"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eckinox%2Ftinymce-bundle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eckinox%2Ftinymce-bundle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eckinox%2Ftinymce-bundle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eckinox%2Ftinymce-bundle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eckinox","download_url":"https://codeload.github.com/eckinox/tinymce-bundle/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248636368,"owners_count":21137438,"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":["symfony-bundle","tinymce","tinymce-web-component"],"created_at":"2024-11-07T16:19:09.052Z","updated_at":"2025-04-12T21:32:57.267Z","avatar_url":"https://github.com/eckinox.png","language":"JavaScript","readme":"# TinyMCE for your Symfony apps and forms\n\n## Getting started\n\n### 1. Install this package via Composer\n\n```bash\ncomposer require eckinox/tinymce-bundle\n```\n\n### 2. Start using TinyMCE!\n\n#### Using TinyMCE in Symfony forms\n\nAdding a TinyMCE editor in your Symfony forms works like any other form types:\n\n\n```php\npublic function buildForm(FormBuilderInterface $builder, array $options): void\n{\n    $builder-\u003eadd(\"comment\", TinymceType::class, [\n        \"attr\" =\u003e [\n            \"toolbar\" =\u003e \"bold italic underline | bullist numlist\",\n        ],\n    ])\n    // ...\n```\n\n#### Using TinyMCE in templates\n\nTo render a TinyMCE editor in Twig without using Symfony forms, you can use the \n`tinymce()` Twig function that is provided by this bundle.\n\nSimply provide the value as the first argument and you're good to go.\n\nYou can also use the second argument to specify attributes to add to the element.\n\nHere is an example:\n\n```twig\n{{ tinymce(\"\u003cp\u003eThis is a note\u003c/p\u003e\", { name: \"notes\", skin: \"oxide\" }) }}\n```\n\n#### Using TinyMCE in Javascript\n\nTo render a TinyMCE editor in Javascript, first ensure that the main TinyMCE script\nis loaded. \n\nIf you already use the `tinymce()` Twig function or the `TinymceType` on the page,\nthe scripts are already loaded. Otherwise, you can include them on the page either\nby adding the following scripts manually:\n\n```html\n\u003cscript src=\"{{ asset('bundles/tinymce/ext/tinymce/tinymce.min.js') }}\"\u003e\u003c/script\u003e\n\u003cscript src=\"{{ asset('bundles/tinymce/ext/tinymce-webcomponent.js') }}\" type=\"module\"\u003e\u003c/script\u003e\n```\n\nor by using the `tinymce_scripts()` function like so:\n```twig\n{{ tinymce_scripts() }}\n```\n\nThen, all you have to do is add a TinyMCE editor web element on the page with the\ndesired attributes and value.\n\nHere's is an example:\n\n```js\nconst contentText = document.createTextNode(\"\u003cp\u003eYour original text goes here\u003c/p\u003e\");\nconst editor = document.createElement(\"tinymce-editor\");\n\neditor.append(contentText);\neditor.setAttribute(\"skin\", \"appstack\");\n\n// Add the editor to the page\ndocument.body.append(editor);\n```\n\nYou can refer to [Tiny's web component documentation](https://www.tiny.cloud/docs/tinymce/6/webcomponent-ref) \nfor more information.\n\n\n## Configuring TinyMCE\n\nThis bundle includes and uses the web component version of TinyMCE. \n\nYou can configure TinyMCE by setting HTML attributes on the editor element itself (`\u003ctinymce-editor\u003e`).\n\nWhen using the form type, you can use the `attr` option to set the attributes.  \nFor example, you can set the toolbar's actions like so:\n\n```php\npublic function buildForm(FormBuilderInterface $builder, array $options): void\n{\n    $builder-\u003eadd(\"comment\", TinymceType::class, [\n        \"attr\" =\u003e [\n            \"toolbar\" =\u003e \"bold italic underline | bullist numlist\",\n        ],\n    ])\n    // ...\n```\n\nFor more information on the different configurations that TinyMCE offers, refer \nto [Tiny's web component documentation](https://www.tiny.cloud/docs/tinymce/6/webcomponent-ref/).\n\n### Default configurations\n\nYou can set the following default options in a configuration file:\n\n```yaml\ntinymce:\n    # The configurations mirror the TinyMCE attributes.\n    # Learn more about each option in Tiny's documentation: \n    # https://www.tiny.cloud/docs/tinymce/6/webcomponent-ref/\n    skin: \"oxide\"\n    content_css: \"default\"\n    plugins: \"advlist autolink link image media table lists\"\n    toolbar: \"bold italic underline | bullist numlist\"\n    images_upload_url: \"https://yoursite.com/upload\"\n    images_upload_route: \"\" # Name of the route for `images_upload_url` (leave `images_upload_url` blank if using this)\n    images_upload_route_params: \"\" # Parameters of the route for `images_upload_url` (leave `images_upload_url` blank if using this)\n    images_upload_handler: \"\"\n    images_upload_base_path: \"\"\n    images_upload_credentials: \"true\"\n    images_reuse_filename: \"\"\n```\n\n\n### File uploads (optional)\n\nFile uploads are not handled by default, as the process will vary from project to project.\n\nTo set this up, take a look at [Tiny's web component file upload documentation](https://www.tiny.cloud/docs/tinymce/6/webcomponent-ref/#setting-the-images-upload-url).\n\nTo help you get started, we have provided an example of what the implementation may look like. \nYou can find this example in [`docs/file-upload-example.md`](./docs/file-upload-example.md).\n\n\n## AppStack skin\n\nThis bundle comes with an `appstack` skin, which matches the style of the \n[AppStack Bootstrap template](https://appstack-bs5.bootlab.io/index.html). \n\nThis skin is an extension of the tinymce-5, and it has dark mode support built-in.\n\nTo use it, simply specify it in your configuration:\n```yaml\n# config/packages/tinymce.yaml\ntinymce:\n    skin: appstack\n    content_css: appstack\n```\n\n\n## Versions\n\n| Bundle version | TinyMCE version | TinyMCE Web Component version |\n|----------------|-----------------|-------------------------------|\n| **1.1**        | 6.8.2           | 2.0.2                         |\n| **1.0**        | 6.0.2           | 2.0.0                         |\n\n\n## Contributing\n\nFeel free to submit issues and PRs to the [eckinox/tinymce-bundle](https://github.com/eckinox/tinymce-bundle) repository on GitHub.\n\nFor more information on how to contribute, check out [CONTRIBUTING.md](./CONTRIBUTING.md).\n\n\n## License\n\nThis bundle is distributed under the MIT license.\n\n[TinyMCE](https://github.com/tinymce/tinymce) and the [TinyMCE web component](https://github.com/tinymce/tinymce-webcomponent) are developed and distributed by [Tiny®](https://www.tiny.cloud/) under the MIT license.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feckinox%2Ftinymce-bundle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feckinox%2Ftinymce-bundle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feckinox%2Ftinymce-bundle/lists"}