Getting Started with Vue Rich Text Editor

7 Aug 20268 minutes to read

The 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 Vue Rich Text Editor component using either the Composition API or the Options API.

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

• Syncfusion CLI
• Vite CLI

Prerequisites

• Node.js 24+ (LTS recommended).
• Syncfusion CLI.

Install the Syncfusion CLI

Install the Syncfusion CLI globally using the following command:

npm

npm install -g @syncfusion/syncfusion-cli

Set up the Vite project using Syncfusion CLI

You can create a Vue application with Vite using the Syncfusion CLI. The CLI provides two ways to create a project:

Non-interactive mode

Non-interactive mode allows you to create a project directly using a single command with the required command-line arguments.

CMD

sf new my-app --framework vue --type ts --template rich-text-editor --theme tailwind3

In this mode, the project configuration is passed directly in the command. The above command creates a Vue application with Vite and configured it with the Syncfusion^® Rich Text Editor component. The generated project uses the TypeScript and the Composition API.

Interactive mode

Interactive mode guides you through the project creation process with step-by-step prompts.

CMD

sf

When you run the sf command, the CLI prompts you to select the required project configuration options. To create a Vue application with Vite and the Syncfusion^® Rich Text Editor component, select the following options:

CMD

√ Project name? ... my-app
√ Choose Framework: » Vue
√ Choose Language: » TypeScript
√ Choose Template: » Rich Text Editor
√ Choose Theme: » Tailwind3
√ Choose Style Format: » CSS
√ Would you like to integrate the Syncfusion MCP Server (AI Assistant) into this project? ... no
√ Would you like to install Syncfusion Component Skills for AI-powered development? ... no      
√ Install dependencies and start app now? ... no

The above selections generate a Vue application with Vite and configure it with the Syncfusion^® Rich Text Editor component. You can choose different values for language, theme, style format, MCP setup, and skills installation based on your project requirements.

The Syncfusion^® CLI creates the project with a predefined template. After the project is generated, you can customize or replace the component code based on your application requirements.

Run the project

Once the project is created, navigate to the project directory and run the following commands in your terminal.

CMD

cd my-app
npm install
npm run dev

The output will appear as follows:

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.

NOTE

For information about supported Vue versions and Syncfusion package compatibility, refer to the Version Compatibility 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.

Since the Syncfusion packages are not installed at this stage, choose the No option when prompted. 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

Syncfusion provides multiple themes for the Rich Text Editor component. For a complete list of available themes, refer to the themes packages.

To apply the Tailwind 3 theme, install the corresponding theme package by using the following command:

npm install @syncfusion/ej2-tailwind3-theme

The installed theme package includes an index.css file that automatically imports all the required dependency styles. Import the following stylesheet into src/style.css.

@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/rich-text-editor/index.css';

IMPORTANT

To apply the application-specific styles correctly remove all the default styles from src/style.css.

Module Injection

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

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

These modules can be injected as services using Vue’s provide function as demonstrated in the following example.

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>

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>

TIPS

Additional feature modules are available here.

Adding Rich Text Editor component

Now, you can start adding the Vue Rich Text Editor component in the application. For getting started, add the Rich Text Editor component in src/App.vue file using the 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>

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.css

@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/rich-text-editor/index.css';

Run the Application

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

npm run dev

The Syncfusion^® Vue Rich Text Editor is displayed in the browser as shown below.

See Also

• Accessibility in Rich Text Editor
• Keyboard support in Rich Text Editor
• Globalization in Rich Text Editor

NOTE

Looking for the full Vue Rich Text Editor component overview, features, pricing, and documentation? Visit the Vue Rich Text Editor page.