The following steps is used to Integrate Syncfusion EJ2 Vue 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 Vue 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 Vue, EJ2 Components from scratch to the Laravel Project.
In the command prompt, run the following commands to install the dependencies.
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 vue js dependencies.
npm install vue@next @vitejs/plugin-vueInstall the Syncfusion EJ2 Vue Rich Text Editor package.
npm install @syncfusion/ej2-vue-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 vue from "@vitejs/plugin-vue";
export default defineConfig({
plugins: [
laravel({
input: ["resources/css/app.css", "resources/js/app.js"],
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
});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.js', 'resources/css/app.css'])
<!-- Styles -->
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
</head>
<body class="antialiased">
<div id="app"></div>
</body>
</html>import { createApp } from "vue";
import Welcome from "./Welcome.vue";
createApp(Welcome).mount("#app");<template>
<div>
<div class="control-section">
<div class="sample-container">
<div class="default-section">
<div id="defaultRTE">
<ejs-richtexteditor id="default" ref="rteInstance">
<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>
</ejs-richtexteditor>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { RichTextEditorComponent, Toolbar, Link, Image, HtmlEditor, Table } from "@syncfusion/ej2-vue-richtexteditor";
export default {
name: "App",
components: {
"ejs-richtexteditor": RichTextEditorComponent,
},
data: function () {
return {};
},
methods: {},
provide: {
richtexteditor: [Toolbar, Link, Image, HtmlEditor, Table],
},
};
</script>
To run the project 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 Vue Rich Text Editor.