@richhtmleditor/vue

@richhtmleditor/vue

Vue 3 component for Rich HTML Editor, built on @richhtmleditor/core. WYSIWYG authoring with toolbar presets, slot-based custom tools, and enterprise plugin support.

Current release: 1.2.10 — Depends on @richhtmleditor/core ^1.2.10.

Repository: github.com/rajkishorsahu89/richhtmleditor

Demo: richhtmleditor.stackkitlabs.com — demo · guide · API. Doc Preview joint demo: stackkitlabs.com/products/doc-preview

What's in 1.2.10

• RichHtmlEditor — Vue 3 defineComponent wrapper around createEditor
• Props — content, editable, dark, theme, toolbar, features, plugins
• Custom tools — customToolIds with #tool-{id} or default #tool slots
• Events — @change and @save emit EditorContent
• Re-exports all public symbols from @richhtmleditor/core

New in 1.2.10

Ships as ESM with TypeScript declarations. Peer dep: vue ^3.5. Import @richhtmleditor/themes CSS in your app entry.

Keywords: richhtmleditor vue vue3 wysiwyg rich-text-editor

Install

npm install @richhtmleditor/vue @richhtmleditor/themes
# Adds @richhtmleditor/core automatically.
# Peer dep: vue ^3.5.

Usage — component

<script setup lang="ts">
import { ref } from "vue";
import { RichHtmlEditor } from "@richhtmleditor/vue";
import "@richhtmleditor/themes/richhtmleditor.css";

const html = ref("<p>Hello <strong>world</strong></p>");

function onChange(content: { html: string }) {
  html.value = content.html;
}
</script>

<template>
  <RichHtmlEditor
    :content="html"
    toolbar="standard"
    :features="{ tables: true, media: true }"
    @change="onChange"
  />
</template>

Usage — custom tool slot

<RichHtmlEditor
  :toolbar="{ preset: 'standard', layout: ['bold', 'italic', '|', 'approve'] }"
  :custom-tool-ids="['approve']"
>
  <template #tool-approve="{ tool }">
    <button type="button" @click="approve">Approve</button>
  </template>
</RichHtmlEditor>

Usage — enterprise plugins

<script setup lang="ts">
import { createAiPlugin } from "@richhtmleditor/ai";
import { createCommentsPlugin } from "@richhtmleditor/comments";
import { createWorkflowsPlugin } from "@richhtmleditor/workflows";
import { resolveEnterpriseFeatures } from "@richhtmleditor/enterprise/browser";

const gate = resolveEnterpriseFeatures({ token: "RHE-ENT-DEMO-2026-FULL" });

const plugins = [
  createAiPlugin(),
  createCommentsPlugin({ author: "Reviewer" }),
  createWorkflowsPlugin({ actor: "Legal", role: "editor" })
];
</script>

<template>
  <RichHtmlEditor
    toolbar="full"
    :features="gate.features"
    :plugins="plugins"
  />
</template>

API

RichHtmlEditor props

RichHtmlEditor events

Slots

Related packages

• @richhtmleditor/core — framework-agnostic engine (auto-installed).
• @richhtmleditor/themes — shared CSS.
• @richhtmleditor/react — React component.
• @richhtmleditor/angular — Angular component.
• @richhtmleditor/enterprise — licence and feature gates.
• @richhtmleditor/ai — AI authoring plugin.
• @richhtmleditor/comments — review comments plugin.
• @richhtmleditor/workflows — approval workflows plugin.
• @richhtmleditor/collab — Yjs collaboration plugin.
• @richhtmleditor/diagrams — Mermaid diagrams plugin.
• @richhtmleditor/math — LaTeX/MathML equation plugin.
• @richhtmleditor/export — DOCX/PDF/HTML export plugin.
• @richhtmleditor/spellcheck — real-time spell check plugin.
• @richhtmleditor/templates — document templates plugin.
• @richhtmleditor/mentions — @ mentions plugin.

License

MIT