engars/tinymce

TinyMCE WYSIWYG editor integration for laravel-admin

dev-main 2026-07-31 08:23 UTC

Requires

• php: >=7.0.0
• encore/laravel-admin: ~1.8

MIT

• EngarS

• tinymce
• editor
• extension
• laravel-admin

Published on Packagist.org on 2026-07-31 08:29 UTC

README

This is a laravel-admin extension that integrates the TinyMCE WYSIWYG editor into the laravel-admin form.

Requirements

• php: >=7.0.0
• encore/laravel-admin: ~1.8

Installation

composer require engars/tinymce

php artisan vendor:publish --tag=laravel-admin-ext-tinymce

Configuration

To publish the configuration file, run the following command:

php artisan vendor:publish --tag=tinymce-config

This will create a config/tinymce.php file. In this file, you can customize the editor's options. For more information on the available options, please refer to the TinyMCE Documentation.

Example configuration:

return [
    'editor' => [
        'plugins' => 'code table lists advlist link anchor media image quickbars help toc',
        'toolbar' => 'undo redo | blocks | bold italic | alignleft aligncenter alignright | indent outdent | bullist numlist | code | table | image | toc',
        'contextmenu' => 'link image table',
        'image_advtab' => true,
        'hidden_input' => false,
        'license_key' => 'gpl',
    ],

    'expressions' => [
        'images_upload_handler',
        'file_picker_callback',
        'setup',
    ],
];

Usage

Use it in the form:

$form->tinymce('content');

You can also override the default configuration for a specific editor instance:

$form->tinymce('content')
    ->config([
        'menubar' => 'edit view insert tools',
        'plugins' => 'code',
        'toolbar' => 'undo redo | code',
    ]);

Localization

To change the editor's language, you can use the language and language_url options. TinyMCE 7 does not bundle language packs by default.

1. Download a language pack from the official TinyMCE website.
2. Place it in your project's public directory, for example, in public/vendor/tinymce/langs/.
3. Specify the path in the config/tinymce.php configuration file:

// config/tinymce.php
return [
    'editor' => [
        'language' => 'ru', // The language code, e.g., 'ru' for Russian
        'language_url' => asset('vendor/tinymce/langs/ru.js'), // Path to the language file
        // ...
    ],
    // ...
];

For the latest information on localization, please refer to the official TinyMCE documentation.

Image Uploading

Configuring image uploads is a common requirement. The process involves a backend route to handle the file and a JavaScript function to manage the upload process on the client side.

1. Create a backend route to handle the image upload. This route will receive the image and should return a JSON response with the location of the stored file.

   // e.g., in routes/admin.php
   Route::post('tinymce/upload', [App\Http\Controllers\Admin\TinyMceController::class, 'upload']);

2. Create the controller (TinyMceController in this example) to implement the upload logic. It should store the file and return a JSON response like {"location": "path/to/your/image.jpg"}.

3. Create a JavaScript handler for the upload. Create a new JavaScript file (e.g., public/js/tinymce/tinymce-image-handler.js) and place your upload handler logic inside it. The handler function must be globally accessible. A full example of the handler can be found in the TinyMCE documentation.

4. Include the JavaScript file in the admin controller where you use the TinyMCE editor.

   // In your Admin Controller (e.g., PostController.php)
   
   class PostController extends AdminController
   {
       public function form()
       {
           // Include the custom JS handler
           Admin::js('js/tinymce/tinymce-image-handler.js');
   
           $form = new Form(new Post());
   
           $form->tinymce('content');
   
           return $form;
       }
   }

5. Configure the handler in config/tinymce.php. Make sure the function name matches the one in your JavaScript file and is listed in the expressions array.

   // config/tinymce.php
   return [
       'editor' => [
           // ...
           'images_upload_handler' => 'tinymce_upload_handler', // The name of your JS function
       ],
       'expressions' => [
           'images_upload_handler', // Important: list the function name here
       ],
   ];

License

This project is licensed under the MIT License.