How to Integrate Syncfusion EJ2 React RichTextEditor Component in Laravel project

Laravel is a free, open-source PHP web application framework used for web application development, following the model-view-controller (MVC) architectural pattern. Laravel provides a clean and elegant syntax while also offering robust features for web development.

This article will guide you through the steps to integrate Syncfusion EJ2 React Rich Text Editor in Laravel using Vite.

Prerequisites

Before getting started, ensure the following are installed in your development machine:

• PHP
• Node.js
• Laravel
• Composer
• Vite

Setting up the Environment

For Windows users:

1. Install PHP: Download PHP from the official website.
2. Install Composer: Download Composer from the official website.
3. Install Laravel: Open the command prompt and run the following command to install Laravel: composer global require laravel/installer

Creating a Laravel Project

For Windows users, create a new Laravel project using the command: laravel new example-app. Then, change the directory to the example-app folder using the command: cd example-app.

Getting Started from Laravel Project

This section describes how to add the React, EJ2 Components from scratch to the Laravel Project.

1. Install dependencies: In the command prompt, run the following commands to install the dependencies:

   • Install the dependencies of the Laravel project: composer install
   • If you encounter any error while installing the dependencies, run the following command: composer install --ignore-platform-req=ext-fileinfo
   • Install the React js dependencies: npm install react react-dom @vitejs/plugin-react
   • Install the Syncfusion EJ2 React Rich Text Editor package: npm install @syncfusion/ej2-react-richtexteditor

2. Configure the vite.config.js file: Add the following code to the vite.config.js file in the root directory of the project.

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    laravel({
      input: ["resources/css/app.css", "resources/js/app.jsx"],
      refresh: true,
    }),
    react(),
  ],
});

3. Add the root element to the welcome.blade.php file: Add the root element to the welcome.blade.php file in the resources/views folder.

    
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet">
        
        @vite(['resources/js/app.jsx', 'resources/css/app.css'])
        <!-- Styles -->
        <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">     
        <div id="app"></div>   

4. Add the following code to the app.jsx file to mount the React application: Rename the app.js to app.jsx and mount the React component.

//Import and create a React root component
import React from "react";
import ReactDOM from "react-dom";
import Welcome from "./Welcome";

ReactDOM.render(<welcome>, document.getElementById("app"));

5. Create a Welcome.React file in the resources/js folder and add the following code

import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function Welcome() {
    let rteObj;
    return (<div classname="control-pane">
            <div classname="control-section" id="rte">
                <div classname="rte-control-section">
                    <richtexteditorcomponent id="defaultRTE" ref="{(richtexteditor)" ==""> { rteObj = richtexteditor; }}>
                        
                        <inject services="{[HtmlEditor," toolbar,="" image,="" link,="" quicktoolbar]}="">
                    </inject></richtexteditorcomponent>
                </div>
            </div>
        </div>);
}
export default Welcome;

Running the Project

To run the application, follow these steps:

1. Build the project: To build the project, run the following command: npm run build
2. Generate Key: This step is only needed if the project is cloned from GitHub. Run the command: php artisan key:generate
3. Run the project: To run the project, run the following command: php artisan serve

Visit http://localhost:8000 in your browser to see the Laravel application with the integrated Syncfusion EJ2 React Rich Text Editor.

Additional References

• Sample GitHub Repository