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:

Setting up the Environment

For Windows users:

Install PHP: Download PHP from the official website.
Install Composer: Download Composer from the official website.
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.

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
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(),
  ],
});

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>

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"));

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:

Build the project: To build the project, run the following command: npm run build
Generate Key: This step is only needed if the project is cloned from GitHub. Run the command: php artisan key:generate
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

Conclusion

We hope you enjoyed learning how to Integrate Syncfusion EJ2 React RichTextEditor Component in Laravel project.

You can refer to React RichTextEditor feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can also explore our React RichTextEditor example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)