Getting Started with Vue Rich Text Editor

21 May 20264 minutes to read

The Syncfusion Vue Rich Text Editor is a WYSIWYG (What You See Is What You Get) editor that enables users to create, edit, and format rich text content with features like multimedia insertion, lists, and links. This article provides a step-by-step guide for setting up a Vite project with a TypeScript environment and integrating the Syncfusion Vue Rich Text Editor component using the Composition API.

To get started quickly with the Vue Rich Text Editor, refer to this video tutorial:

Prerequisites

This guide uses Vite as the bundler and development environment. Install Node.js 24.13.0 or higher before proceeding. For detailed information about Vite’s capabilities and configuration options, refer to the Vite documentation.

Create a Vue Application

To set-up a Vue application , run the following command.

npm create vite@latest my-app -- --template vue-ts

This command will prompt you to install the required packages and start the application. Select the options as shown below.

As Syncfusion packages are not installed yet, currently, the No option will be selected. Then, navigate to the project directory and install the dependencies using the following commands:

cd my-app
npm install

Adding Syncfusion Rich Text Editor package

All available Essential JS 2 packages are published in the npmjs.com registry. Install the Vue Rich Text Editor component with the following command:

npm install @syncfusion/ej2-vue-richtexteditor

Adding CSS reference

The following CSS files are available in ../node_modules/@syncfusion package folder. This can be referenced in the <style> section of src/App.vue file using the following code.

@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-richtexteditor/styles/tailwind3.css';

IMPORTANT

To apply the application-specific styles correctly remove all the default styles from src/style.css. You can also refer to the themes section for details about built-in themes and CSS references for individual controls.

Module Injection

The following modules provide the basic features of the Rich Text Editor.

• HtmlEditor - Inject this module to use Rich Text Editor as html editor.
• Image - Inject this module to use image feature in Rich Text Editor.
• Link - Inject this module to use link feature in Rich Text Editor.
• QuickToolbar - Inject this module to use quick toolbar feature for the target element.
• Toolbar - Inject this module to use Toolbar feature.

IMPORTANT

Additional feature modules are available here.

Adding Rich Text Editor component

Now, you can start adding Vue Rich Text Editor component in the application. For getting started, add the Rich Text Editor component in src/App.vue file using following sample.

Composition API (~/src/App.vue)

<template>
  <div>
    <ejs-richtexteditor></ejs-richtexteditor>
  </div>
</template>
<script setup>
import { provide } from 'vue';
import { RichTextEditorComponent as EjsRichtexteditor, Toolbar, Link, Count, Image, HtmlEditor, QuickToolbar } from "@syncfusion/ej2-vue-richtexteditor";
provide('richtexteditor', [Toolbar, Link, Count, Image, HtmlEditor, QuickToolbar]);
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-richtexteditor/styles/tailwind3.css';
</style>

Options API (~/src/App.vue)

<template>
  <div>
    <ejs-richtexteditor></ejs-richtexteditor>
  </div>
</template>
<script>
import { RichTextEditorComponent, Toolbar, Link, Count, Image, HtmlEditor, QuickToolbar } from "@syncfusion/ej2-vue-richtexteditor";
export default {
  name: "App",
  components: {
    "ejs-richtexteditor": RichTextEditorComponent,
  },
  provide: {
    richtexteditor: [Toolbar, Link, Count, Image, HtmlEditor, QuickToolbar],
  },
};
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-richtexteditor/styles/tailwind3.css';
</style>

Run the application

Use the following command to run the application in the browser.

npm run dev

See also

• Accessibility in Rich text editor
• Keyboard support in Rich text editor
• Globalization in Rich text editor

For migrating from Vue 2 to Vue 3, refer to the migration documentation.