vue-advanced-editor-khush

A reusable, MS Word–like Vue 3 WYSIWYG editor component with drag, resize, rotate, and persistent text boxes — built with love by Khushnawaj.

📦 Installation

npm install vue-advanced-editor-khush

🧩 Usage

Global Registration

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import Editor from 'vue-advanced-editor-khush';

const app = createApp(App);
app.use(Editor);
app.mount('#app');

Component Usage

<template>
  <MainEditor />
</template>

<script setup>
import { MainEditor } from 'vue-advanced-editor-khush';
</script>

🛠 Features

• 🎯 Drag, resize, rotate text boxes and many more
• 📏 Persistent data via IndexedDB
• 🗑️ Keyboard deletion support
• 🧠 Toolbar for z-index and deletion
• 🖼 Export content via html2canvas and jspdf

📦 Peer Dependencies

Make sure these are installed in your host app:

"peerDependencies": {
  "vue": "^3.0.0",
  "axios": "^1.0.0",
  "vue-toastification": "^2.0.0",
  "html2canvas": "^1.4.1",
  "jspdf": "^2.5.1"
}

Install them:

npm install vue axios vue-toastification html2canvas jspdf

📂 File Structure (Simplified)

src/
├── components/
│   ├── MainEditor.vue
│   └── TextBoxEditor.vue
├── utils/
│   └── IndexedDBHelper.js
└── index.js

📸 Screenshots or Demo

📜 License

MIT