Modern Rich Text Editor – Richer than rich

Richer than rich is a lightweight, modern, accessible, responsive, and customizable rich text editor for Vue 3.

How to use it:

1. Import and register the Richer than rich editor.

import Richer from 'richer-than-rich'
import 'richer-than-rich/dist/style.css'

2. Add the <richer> component to your template.

<richer></richer>

3. Enable/disable editor buttons.

<richer
  :buttons="['bold', 'underline', 'subscript', 'superscript']"
>
</richer>

// OR
<richer
  :buttons="[
    { name: 'dark', label: 'Dark theme', icon: 'i-moon', action: log },
    { name: 'light', label: 'Light theme', icon: 'i-sun', action: log }
  ]"
>
</richer>

4. Enable the dark mode.

<richer
  :dark="darkMode">
</richer>

5. Event handlers.

<richer
  @button-click="log('button-click', $event)"
  @click="log('click', $event)"
  @keyup="log('keyup', $event)"
  @focus="log('focus', $event)"
  @blur="log('blur', $event)"
  @paste="log('paste', $event)">
</richer>

Preview:

Download Details:

Author: antoniandre

Live Demo: https://antoniandre.github.io/richer-than-rich/

Download Link: https://github.com/antoniandre/richer-than-rich/archive/refs/heads/main.zip

Official Website: https://github.com/antoniandre/richer-than-rich

Install & Download:

# Yarn
$ yarn add richer-than-rich

# NPM
$ npm i richer-than-rich