Loading image

Blogs / Programming

How to Integrate TinyMCE in Laravel | Latest 2024

How to Integrate TinyMCE in Laravel | Latest 2024

  • showkat ali
  • 0 Comments
  • 764 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!

 

 

 

 

 

 

  • Programming
showkat ali Author

showkat ali

Greetings, I'm a passionate full-stack developer and entrepreneur based in Pakistan. I specialize in PHP, Laravel, React.js, Node.js, JavaScript, and Python. I own interviewsolutionshub.com, where I share tech tutorials, tips, and interview questions. I'm a firm believer in hard work and consistency. Welcome to interviewsolutionshub.com, your source for tech insights and career guidance

0 Comments

Post Comment

Recent Blogs

Recent posts form our Blog

How to Make Your Website Faster: Speed and SEO Tips

How to Make Your Website Faster: Speed and SEO Tips

showkat ali
/
Technology

Read More
Laravel Cloud: The Future of Instant App Deployment

Laravel Cloud: The Future of Instant App Deployment

showkat ali
/
Programming

Read More
Unlocking the Metaverse: Navigating the Future of Virtual Realities

Unlocking the Metaverse: Navigating the Future of Virtual Realities

Qadir Hassan
/
Programming

Read More
Easy Guide to Integrate TinyMCE with React | Step-by-Step Tutorial

Easy Guide to Integrate TinyMCE with React | Step-by-Step Tutorial

showkat ali
/
Programming

Read More
how to install node js in shared hosting server

how to install node js in shared hosting server

showkat ali
/

Read More
[ Fixed ] CSRF Token Mismatch in Laravel API

[ Fixed ] CSRF Token Mismatch in Laravel API

showkat ali
/
Programming

Read More