How to Integrate EJ2 React RichTextEditor in Laravel Project?

8 mins read

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; }} >
                        <p>The Rich Text Editor component is a WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
                        <p><b>Key features:</b></p>
                        <ul>
                            <li>
                                <p>Provides <IFRAME> and <DIV> modes</p>
                            </li>
                            <li>
                                <p>Capable of handling markdown editing.</p>
                            </li>
                            <li>
                                <p>Contains a modular library to load the necessary functionality on demand.</p>
                            </li>
                            <li>
                                <p>Provides a fully customizable toolbar.</p>
                            </li>
                            <li>
                                <p>Provides HTML view to edit the source directly for developers.</p>
                            </li>
                            <li>
                                <p>Supports third-party library integration.</p>
                            </li>
                            <li>
                                <p>Allows a preview of modified content before saving it.</p>
                            </li>
                            <li>
                                <p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p>
                            </li>
                            <li>
                                <p>Contains undo/redo manager.</p>
                            </li>
                            <li>
                                <p>Creates bulleted and numbered lists.</p>
                            </li>
                        </ul>                       
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
</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
I hope you enjoyed learning about how to integrate EJ2 React RichTextEditor in laravel project.

You can refer to our React Rich Text Editor feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React Rich Text Editor 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, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)