Tinymce4 Laravel Package

Getting Started

First Steps

1. Installation

   composer require contao-components/tinymce4
   

   Ensure your composer.json includes "minimum-stability": "dev" if using development versions.

2. Basic Setup Add the TinyMCE service provider and alias in config/app.php:

   'providers' => [
       // ...
       ContaoComponents\TinyMCE4\TinyMCEServiceProvider::class,
   ],
   'aliases' => [
       // ...
       'TinyMCE' => ContaoComponents\TinyMCE4\Facades\TinyMCE::class,
   ],
   

3. First Use Case: Blade Integration In a Blade template, initialize TinyMCE with default settings:

   {!! TinyMCE::script() !!}
   <textarea id="my-editor"></textarea>
   <script>
       tinymce.init({
           selector: '#my-editor',
           plugins: 'advlist autolink lists link image charmap print preview',
           toolbar: 'undo redo | bold italic | alignleft aligncenter alignright'
       });
   </script>
   

Implementation Patterns

Common Workflows

1. Dynamic Configuration Pass custom settings via Laravel’s config or a service container:

   // config/tinymce.php
   return [
       'default' => [
           'plugins' => 'code table',
           'toolbar' => 'bold italic | code table',
       ],
   ];
   

   Use in Blade:

   {!! TinyMCE::script(config('tinymce.default')) !!}
   

2. Form Integration (Laravel Collective) Attach TinyMCE to a {!! Form::textarea() !!} field:

   {!! Form::textarea('content', old('content'), ['class' => 'tinymce-editor']) !!}
   <script>
       tinymce.init({ selector: '.tinymce-editor', ... });
   </script>
   

3. Asset Optimization Use Laravel Mix/Vite to bundle TinyMCE plugins:

   // resources/js/app.js
   import 'tinymce/tinymce';
   import 'tinymce/plugins/advlist';
   tinymce.init({ ... });
   

4. Backend Admin Panels (Contao/Laravel Admin) Integrate with Contao’s DCA (Data Container) or Laravel Nova:

   // Example: Contao DCA field config
   $GLOBALS['TL_DCA']['tl_content']['fields']['text'] = [
       'inputType' => 'textarea',
       'eval' => ['tinymce' => ['plugins' => 'fullscreen']],
   ];
   

Gotchas and Tips

Pitfalls

1. Asset Conflicts

   • TinyMCE requires jQuery (if using legacy plugins). Ensure jQuery is loaded before TinyMCE:

     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     {!! TinyMCE::script() !!}
     

   • Fix: Use Laravel’s @stack or mix-manifest to manage dependencies.

2. CSRF Token Issues TinyMCE’s AJAX features (e.g., image uploads) may fail without CSRF meta tags:

   <meta name="csrf-token" content="{{ csrf_token() }}">
   

   Configure TinyMCE’s images_upload_url to include the token:

   images_upload_url: '/upload?X-CSRF-TOKEN={{ csrf_token() }}',
   

3. Plugin Loading Order

   • Plugins like image or link must be declared before they’re used in toolbar.
   • Debug: Check browser console for tinymce is not defined errors (missing TinyMCE::script()).

4. Laravel Mix/Vite Compatibility

   • If using Vite, ensure TinyMCE’s global tinymce is exposed:

     // vite.config.js
     export default {
       define: {
         global: 'window',
       },
     };
     

Debugging Tips

• Console Logs: Use tinymce.init({ ... }).then(() => console.log('Initialized')); to verify setup.
• Network Tab: Check for 404s on TinyMCE assets (e.g., /js/tinymce/tinymce.min.js).
• Clear Cache: Run php artisan cache:clear and php artisan view:clear if configs aren’t updating.

Extension Points

1. Custom Plugins Load plugins from a CDN or local path:

   external_plugins: {
       'my-plugin': '/vendor/tinymce/plugins/my-plugin/plugin.min.js'
   },
   

2. Laravel Events Trigger TinyMCE initialization via Laravel events (e.g., view.rendered):

   // app/Providers/AppServiceProvider.php
   view()->composer('*', function ($view) {
       if ($view->getName() === 'editor') {
           $view->with('tinymceConfig', config('tinymce.admin'));
       }
   });
   

3. Contao Hooks Extend TinyMCE settings via Contao’s insertTag hook:

   $GLOBALS['TL_HOOKS']['insertTag'][] = function ($tag) {
       if ($tag['name'] === 'tinymce') {
           $tag['attributes']['data-plugins'] = 'fullscreen';
       }
       return $tag;
   };
   

4. Storage Integration For file uploads, create a Laravel route:

   Route::post('/upload', [TinyMCEController::class, 'upload'])->middleware('auth');
   

   // TinyMCEController.php
   public function upload(Request $request) {
       $file = $request->file('file');
       $path = $file->store('tinymce');
       return response()->json(['location' => $path]);
   }