krwnpad-editor: Vue 3 Rich Text Editor

krwnpad-editor is a powerful and customizable rich text editor designed for Vue 3. It provides a clean and intuitive user interface with various text editing features. Easily integrate Krwn-Pad into your Vue projects for a seamless text editing experience.

Installation

npm install krwnpad-editor

Features

Text Formatting

• Bold: Make text bold.
• Italic: Italicize text.
• Underline: Underline text.
• Strikethrough: Strike through text.
• Superscript: Format text as superscript.
• Subscript: Format text as subscript.

Lists

• Ordered List: Create an ordered (numbered) list.
• Unordered List: Create an unordered (bullet) list.

Undo/Redo

• Undo: Undo the last action.
• Redo: Redo the last undone action.

Link

• Create Link: Insert a hyperlink.
• Unlink: Remove a hyperlink.

Alignment

• Left Align: Align text to the left.
• Center Align: Center-align text.
• Right Align: Align text to the right.
• Justify: Fully justify text.

Indentation

• Indent: Increase indentation.
• Outdent: Decrease indentation.

Headings

• Format Block: Select text format (Paragraph, Heading 1-6).

Font

• Font Name: Select the font family.
• Font Size: Select the font size.

Color

• Text Color: Choose the font color.
• Background Color: Choose the background color.

Supported Shortcuts

• Bold: Ctrl/Cmd + b
• Italic: Ctrl/Cmd + i
• Underline: Ctrl/Cmd + u
• Undo: Ctrl/Cmd + z
• Redo: Ctrl/Cmd + Shift + z
• Create Link: Ctrl/Cmd + k
• Justify Full: Ctrl/Cmd + j
• Justify Center: Ctrl/Cmd + c
• Justify Right: Ctrl/Cmd + r
• Justify Left: Ctrl/Cmd + l

Usage

<!-- example usage -->
<template>
  <div
      style="background: #9281c9; padding: 10px; width: 100dvw; height: 100dvh; display:grid; align-items: center; justify-content: center;">
    <TextEditor @value="value => handleInput(value)"/>

    <div class="preview" style="background: white; padding: 20px;">
      <div id="content"></div>
    </div>
  </div>
</template>

<script setup>
import * as TextEditor from "krwnpad-editor";

const handleInput = (value) => {
  const content = document.getElementById("content");
  content.innerHTML = value;
};
</script>