@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

| Feature | Vue usage | | --- | --- | | Callout blocks — info / warning / success / error styled blocks | editorRef.value.commands.insertCallout("info") or toolbar Callout dropdown | | Embed blocks — YouTube, Loom, Figma auto-embed | Paste URL to auto-embed; or editorRef.value.commands.insertEmbed(url) | | Word goal + progress bar | editorRef.value.commands.setWordGoal(500) — progress bar in status bar | | Reading time | Displayed automatically: status bar shows ~N min read | | Dark mode toggle | :dark="true" prop or toolbar toggleDarkMode button | | Markdown shortcuts | Always on — ## → H2, **bold**, _italic_, `code` | | Markdown import | editorRef.value.commands.importMarkdown() — opens .md file picker | | Case change | editorRef.value.commands.caseChange("upper" \| "lower" \| "title" \| "sentence") | | Smart typography | Auto-converts straight quotes, -- → em dash, ... → ellipsis | | Autolink | URLs auto-link on paste and after typing a space | | Task lists | :features="{ taskList: true }" — checkbox bullet lists | | XLSX / CSV paste | Paste from Excel or Google Sheets → inserts a table | | Table sort | Click any <th> to sort column; click again to reverse | | Undo history panel | editorRef.value.commands.undoHistoryPanel() — sidebar with full undo stack | | TOC navigation | Click a TOC entry in the outline panel → scrolls to that heading | | Preview modal | editorRef.value.commands.previewModal() — read-only rendered preview overlay | | Autoresize | :features="{ autoresize: true }" — editor grows with content | | Mobile touch | Touch-optimised toolbar; 40 px tap targets on pointer: coarse devices |

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

| Prop | Type | Description | | --- | --- | --- | | content | string | HTML content. | | editable | boolean | Enable editing (default true). | | dark | boolean | Dark theme tokens. | | theme | EditorThemeTokens | Custom CSS variable overrides. | | toolbar | ToolbarConfig \| ToolbarPresetId | Toolbar preset or custom layout. | | features | EditorFeatureFlags | Feature gates. | | plugins | EditorPlugin[] | Enterprise and custom plugins. | | customToolIds | string[] | Tool IDs with matching #tool-{id} slots. |

RichHtmlEditor events

| Event | Payload | Description | | --- | --- | --- | | change | EditorContent | Fired on document edits. | | save | EditorContent | Fired on save command. |

Slots

| Slot | Props | Description | | --- | --- | --- | | tool-{id} | { tool: ResolvedToolbarTool } | Custom toolbar UI for a tool ID in customToolIds. | | tool | { tool: ResolvedToolbarTool } | Fallback slot when no tool-{id} slot exists. |

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