How to Integrate TinyMCE in Laravel | Latest 2024

showkat ali
Jul 5, 2024
0 Comments
Like 0
405 View

Integrating a powerful rich text editor into your Laravel application can significantly improve the user experience by enabling robust content creation. TinyMCE is a popular choice due to its versatility and simplicity of integration. This blog will walk you through the steps for seamlessly integrating TinyMCE into your Laravel project.

Prerequisites

Before we begin, ensure you have the following:

A Laravel project was set up.
Basic understanding of Laravel and JavaScript.

Step 1: Create Your Laravel Project

If you do not already have a Laravel project, you can start one with Composer. Open your terminal and run the following:

composer create-project --prefer-dist laravel/laravel tinymce-integration

Navigate to the project directory.

cd tinymce-integration

Step 2: Add TinyMCE Library

The TinyMCE source script.
A TinyMCE configuration.

For example:

File: resources/views/components/head/tinymce-config.blade.php

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>
<script>
  tinymce.init({
    selector: 'textarea#myeditorinstance', // Replace this CSS selector to match the placeholder element for TinyMCE
    plugins: 'code table lists',
    toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright | indent outdent | bullist numlist | code | table'
  });
</script>

TinyMCE can be used via CDN without the need to install any packages. You can simply include the TinyMCE script in your Blade template.

Open your Blade template file (e.g.resources/views/welcome.blade.php) and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Integrate TinyMCE in Laravel</title>
    <!-- Include TinyMCE from CDN -->
    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
</head>
<body>
    <div class="container">
        <h1>Integrate TinyMCE in Laravel</h1>
        <form method="POST" action="{{ route('your.route') }}">
            @csrf
            <div class="form-group">
                <label for="content">Content</label>
                <textarea id="content" name="content" class="tinymce-editor"></textarea>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            tinymce.init({
                selector: 'textarea.tinymce-editor', // Select the textarea to apply TinyMCE
                plugins: 'advlist autolink lists link image charmap print preview fullscreen media table code',
                toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
                height: 300
            });
        });
    </script>
</body>
</html>

Step 3: Handling Form Submission

When you submit the form, the content from the TinyMCE editor will be sent to your Laravel controller. Ensure you have a route and controller set up to handle this submission. Here's an example of how you might set this up:

In your web.php file, add a route:

Route::post('/submit', [YourController::class, 'store'])->name('your.route');

In your emailYourController.php, handle the form submission:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class YourController extends Controller
{
    public function store(Request $request)
    {
        // Validate and save the content
        $validatedData = $request->validate([
            'content' => 'required|string',
        ]);

        // Do something with the validated data (e.g., save to the database)

        return back()->with('success', 'Content saved successfully!');
    }
}

Conclusion

Integrating TinyMCE into your Laravel application using the CDN version is straightforward and significantly enhances your content management capabilities. By following the steps outlined in this article, you can provide your users with a powerful and user-friendly text editing experience without the need for additional installations.

Have fun with the coding!