The following steps is used to Integrate Syncfusion EJ2 React Rich Text Editor in Laravel using Vite.
Skip to the getting started section if you have already configured the environment.
Before getting started with Syncfusion React Rich Text Editor component in Laravel using Vite, check whether the following are installed in the developer machine.
- PHP - To download PHP.
- Node.js - To download Node.js.
- Laravel - To install Laravel.
- Composer - To install Composer.
- Vite - To install Vite.
- Download the PHP from the official website.
- Download the Composer from the official website.
- Open the command prompt and run the following command to install Laravel.
composer global require laravel/installerlaravel new example-appNow change the directory to the example-app folder.
cd example-appThis section describes how to add the React, EJ2 Components from scratch to the Laravel Project.
In the command prompt, run the following commands to install the dependencies.
If you are cloning the github repository please goto Run the project.
Install the dependencies of the laravel project.
composer installIf you are getting any error while installing the dependencies, run the following command.
composer install --ignore-platform-req=ext-fileinfoInstall 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-richtexteditorAdd 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 in the resources/views folder.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<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">
</style>
</head>
<body class="antialiased">
<div id="app"></div>
</body>
</html>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"));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={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]}/>
</RichTextEditorComponent>
</div>
</div>
</div>);
}
export default Welcome;To run the application run the following commands.
To build the project, run the following command.
npm run buildThis section is only needed If the project is cloned from github.
php artisan key:generateTo run the project, run the following command.
php artisan serveVisit http://localhost:8000 in your browser to see the Laravel application with the integrated Syncfusion EJ2 React Rich Text Editor.