Rethink WYSIWYG Editor

A custom WYSIWYG (What You See Is What You Get) editor for Vue 3, built with Vite. This editor provides a comprehensive set of formatting tools for rich text editing.

Features

• ✅ Undo/Redo functionality
• ✅ Font editor (family, size, color)
• ✅ Text formatting (bold, italic, underline, strikethrough)
• ✅ Text color
• ✅ Bullet lists
• ✅ Numbered lists
• ✅ Link insertion
• ✅ Image insertion
• ✅ Text alignment (left, center, right, justify)
• ✅ Line spacing
• ✅ Text indentation (increase/decrease)

Installation

npm install rethink-wysiwyg

Usage

Basic Usage

<template>
  <WysiwygEditor
    v-model="content"
    placeholder="Start typing..."
    :min-height="'200px'"
    :max-height="'600px'"
  />
</template>

<script setup>
import { ref } from 'vue'
import { WysiwygEditor } from 'rethink-wysiwyg'
import 'rethink-wysiwyg/style.css'

const content = ref('<p>Hello World!</p>')
</script>

With Disabled State

<template>
  <WysiwygEditor
    v-model="content"
    :disabled="true"
  />
</template>

Listening to Changes

<template>
  <WysiwygEditor
    v-model="content"
    @change="handleChange"
  />
</template>

<script setup>
import { ref } from 'vue'
import { WysiwygEditor } from 'rethink-wysiwyg'

const content = ref('')

const handleChange = (newContent) => {
  console.log('Content changed:', newContent)
}
</script>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | modelValue | string | '' | The HTML content of the editor (v-model) | | placeholder | string | 'Start typing...' | Placeholder text when editor is empty | | disabled | boolean | false | Disables the editor | | minHeight | string | '200px' | Minimum height of the editor | | maxHeight | string | '600px' | Maximum height of the editor |

Events

| Event | Payload | Description | |-------|---------|-------------| | update:modelValue | string | Emitted when content changes (for v-model) | | change | string | Emitted when content changes |

Toolbar Features

Text Formatting

• Bold - Make text bold
• Italic - Make text italic
• Underline - Underline text
• Strikethrough - Strike through text

Font Options

• Font Family - Change font family (Arial, Helvetica, Times New Roman, etc.)
• Font Size - Change font size (8px to 36px)
• Text Color - Change text color using color picker

Lists

• Bullet List - Create unordered bullet list
• Numbered List - Create ordered numbered list

Alignment & Spacing

• Text Alignment - Align text left, center, right, or justify
• Line Spacing - Adjust line spacing (Single, 1.15, 1.5, Double, etc.)
• Indentation - Increase or decrease text indentation

Media

• Insert Link - Insert hyperlinks
• Insert Image - Insert images by URL

History

• Undo - Undo last action (Ctrl+Z / Cmd+Z)
• Redo - Redo last action (Ctrl+Y / Cmd+Y)

Keyboard Shortcuts

• Ctrl+Z / Cmd+Z - Undo
• Ctrl+Y / Cmd+Y - Redo
• Tab - Increase indent
• Shift+Tab - Decrease indent

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Development

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

License

MIT