Loading image

Blogs / Programming

How to Integrate TinyMCE in Laravel | Latest 2024

How to Integrate TinyMCE in Laravel | Latest 2024

  • showkat ali
  • 0 Comments
  • 922 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 Get a Job at Google: A Step-by-Step Guide

How to Get a Job at Google: A Step-by-Step Guide

showkat ali
/
Technology

Read More
How to Create a Custom Signup Form in Django 5.0

How to Create a Custom Signup Form in Django 5.0

Qadir Hassan
/
Programming

Read More
Top 10+ Best Web Frameworks to Learn for a Successful Web Development Career

Top 10+ Best Web Frameworks to Learn for a Successful Web Development Career

showkat ali
/
Programming

Read More
Measuring HR Performance: KPIs Every HR Manager Should Track

Measuring HR Performance: KPIs Every HR Manager Should Track

rimsha akbar
/
Human Resource

Read More
Advancements in 5G Technology

Advancements in 5G Technology

Arman Ali
/
Programming

Read More
5 Useful Examples from groupBy to Improve Your Laravel Skills

5 Useful Examples from groupBy to Improve Your Laravel Skills

showkat ali
/

Read More