@editkit/vue

v1.0.9

Published

15 days ago

Vue 3 and Nuxt rich text editor with components, composables, tables, and no third-party editor engine. A TypeScript alternative to TipTap and Quill.

EditKit Vue Rich Text Editor — `@editkit/vue`

@editkit/vue is the official Vue 3 and Nuxt integration for EditKit Text Editor, with v-model, native tables, a color picker, and floating menus.

⚡ Why @editkit/vue?

🚀 No Third-Party Editor Engine: Built in TypeScript without ProseMirror, Lexical, Slate, or Quill.
🟢 Native Vue 3: Fully supports v-model, ref, reactive, <script setup>, and Nuxt 3.
📊 First-Class Interactive Tables: 6×6 hover grid selector, single-click row/column management, and cell coloring.
🎨 2D HSV Custom Color Picker: 21 palette swatches + 2D spectrum canvas and hue slider.
🫧 Contextual Floating Menus: Smart text selection bubble toolbar, floating table actions, and image resize bar.
🎛️ Granular Feature Props: Turn any toolbar button on or off with boolean props.
🌗 CSS Variable Theming: Sleek dark & light modes. Easily customized via plain CSS.

📦 Installation

# Using npm
npm install @editkit/vue @editkit/ui

# Using pnpm
pnpm add @editkit/vue @editkit/ui

# Using yarn
yarn add @editkit/vue @editkit/ui

All-in-one alternative: npm install editkit-text-editor vue, then import from editkit-text-editor/vue and editkit-text-editor/styles.

🚀 Quick Start

1. Ready-to-Use Component (`<EditKitEditor />` with `v-model`)

<script setup lang="ts">
import { ref } from 'vue';
import { EditKitEditor } from '@editkit/vue';
import '@editkit/ui/styles';

const content = ref('<p>Hello from Vue 3 and EditKit!</p>');
</script>

<template>
  <div class="editor-wrapper max-w-4xl mx-auto p-4">
    <EditKitEditor
      v-model="content"
      theme="dark"
      placeholder="Start typing in Vue..."
      :features="{
        math: false,           // Hide LaTeX Math formula modal
        chart: false,          // Hide Chart widget
        table: true,           // Interactive 6x6 table grid
        emoji: true,           // Emoji picker
      }"
      :bubble-menu="true"
      :table-menu="true"
      :image-menu="true"
    />
  </div>
</template>

2. Composable (`useEditKitEditor`)

<script setup lang="ts">
import { ref } from 'vue';
import { useEditKitEditor } from '@editkit/vue';
import '@editkit/ui/styles';

const editorEl = ref<HTMLElement | null>(null);
const { editor } = useEditKitEditor(editorEl, {
  content: '<p>Composable based editor</p>',
  theme: 'dark',
});
</script>

<template>
  <div>
    <div class="toolbar flex gap-2 mb-2">
      <button @click="editor?.commands.bold()">Bold</button>
      <button @click="editor?.commands.italic()">Italic</button>
      <button @click="editor?.commands.insertTable({ rows: 3, cols: 3 })">Table</button>
    </div>
    <div ref="editorEl" />
  </div>
</template>

🎛️ Complete Component Props Reference

Core Editor Props (`<EditKitEditor />`)

| Prop Name | Type | Default | Description | | :--- | :--- | :--- | :--- | | v-model (modelValue) | string | undefined | Two-way bound HTML content | | defaultValue | string | undefined | Initial uncontrolled HTML content | | theme | 'light' \| 'dark' \| 'system' | 'dark' | Theme appearance | | placeholder | string | 'Write something...' | Empty editor placeholder text | | editable | boolean | true | Read-only mode toggle | | autofocus | boolean | false | Focus the editor after mounting | | defaultFontFamily | string | 'DM Sans' | Initial editor font family | | defaultFontSize | number | 14 | Initial editor font size in pixels | | historyDepth | number | 100 | Maximum undo history entries | | extensions | Extension[] | [] | Core extensions to register | | customToolbarItems | CustomToolbarItem[] | [] | Typed controls appended to the toolbar | | showToolbar | boolean | true | Show or hide the top formatting toolbar | | bubbleMenu | boolean | true | Enable floating selection bubble toolbar | | tableMenu | boolean | true | Enable contextual table action floating menu | | imageMenu | boolean | true | Enable floating image resizer menu | | className | string | '' | Custom CSS class name on root container | | features | ToolbarFeaturesConfig | {} | Granular toolbar button toggles (see table below) |

Toolbar Feature Flags (`features` prop)

🎨 CSS Variable Theming

[data-editkit],
[data-editkit-theme="dark"] {
  --editkit-bg: #0c0d10;
  --editkit-card-bg: #141519;
  --editkit-toolbar-bg: #18191e;
  --editkit-border: #23252f;
  --editkit-border-focus: #7c3aed;
  --editkit-primary: #7c3aed;
  --editkit-font: 'DM Sans', sans-serif;
}

v-model, defaultValue, and composable content are trusted-HTML inputs. Sanitize content from users or external systems before passing it to EditKit and before rendering saved HTML.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

EditKit Vue Rich Text Editor — @editkit/vue

⚡ Why @editkit/vue?

📦 Installation

🚀 Quick Start

1. Ready-to-Use Component (<EditKitEditor /> with v-model)

2. Composable (useEditKitEditor)