How to enable wysiwyg by default on textarea in admin?

Enabling WYSIWYG Editor by Default for Laravel Admin Panel

The TinyMCE WYSIWYG editor is a powerful tool that allows users to create formatted text without needing to know HTML or JavaScript. In many cases, you’ll want this editor to appear automatically when editing certain fields in your admin panel, rather than requiring an extra click to enable it.

This post will guide you through the process of enabling WYSIWYG by default for textarea fields in a Laravel application using the Laravel Company package. Let’s dive right in!

Installing the TinyMCE Package

First, make sure you have the Laravel Tinymce package installed:

composer require laravel-company/tinymce

This package provides a simple way to manage the TinyMCE WYSIWYG editor in your Laravel projects.

Configuring the Editor

After installation, you’ll need to configure the editor in your config/tinymce.php file. Here’s an example of how to set up basic configuration:

'tiny_config' => [
    'mode' => 'textareas',
    'elements' => ['description'],
],

In this example, we’re setting the mode to 'textareas' and specifying that the WYSIWYG editor should apply to elements with the ID description.

Using the TinyMCE Field

Now let’s see how to use this configuration in your Blade templates.

Without Default WYSIWYG

First, consider the default behavior without enabling WYSIWYG by default:

<textarea id="description" name="description"></textarea>

In this case, users will need to click the TinyMCE button (which appears when you install the package) to enable the WYSIWYG editor.

Enabling Default WYSIWYG

To enable the WYSIWYG editor by default for your textarea field, use the tinymce Blade directive:

<textarea id="description" name="description">
    {{ old('description', $post->description) }}
</textarea>

Just make sure that you include this directive above your textarea element.

The old('description') part is used to pre-fill the field with the value from a previous form submission or validation error. Replace $post->description with whatever content you want to display initially.

Customizing the Editor

You can further customize the TinyMCE configuration for each field by passing additional options as an array:

<textarea id="description" name="description">
    {{ old('description', $post->description) }}
</textarea>

<script>
    tinymce.init({
        selector: '#description',
        setup: function (editor) {
            editor.on('init', function () {
                editor.setContent('<p>Initial content here...</p>');
            });
        },
    });
</script>

In this example, we’re setting up an event listener that runs when the editor is initialized. We then use editor.setContent() to set the initial value of the WYSIWYG field.

Conclusion

Enabling WYSIWYG by default for textarea fields in your Laravel admin panel can significantly improve user experience, especially for content-heavy applications.

By using the Laravel Company TinyMCE package, you can easily configure and customize the editor to fit your specific needs. Whether you’re working with blog posts, product descriptions, or any other kind of rich text content, this solution provides a powerful and user-friendly editing experience.

Remember to adapt the examples above to match your application’s structure and requirements.

Happy coding!