Rohan Yeole - HomepageRohan Yeole

RayEditor — Lightweight Rich Text Editor

RayEditor is a modern, customizable, and lightweight WYSIWYG content editor built with pure JavaScript.

It offers a seamless writing experience with support for rich text formatting, code blocks, media uploads, and more.

Perfect for blogs, CMS platforms, documentation tools, and any web application requiring rich content editing.

GitHub RepositoryQuick Setup

Editor Preview

Editor preview will appear here once initialized.

Features

Text Formatting

  • Bold, Italic, Underline
  • Strikethrough, Case Transformations
  • Subscript & Superscript

Headings & Lists

  • H1 to H6 headings
  • Ordered & Unordered lists
  • Nested list support

Code Support

  • Inline code snippets
  • Syntax-highlighted code blocks
  • Multiple language support

Media Support

  • Image upload & resizing
  • File attachments
  • Drag & drop support

Tables

  • Create and modify tables
  • Add/remove rows & columns
  • Responsive by default

Advanced Features

  • Full undo/redo history
  • Text & background colors
  • Customizable toolbar

Setup Guide

1. Include RayEditor via CDN

<!-- RayEditor CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yeole-rohan/ray-editor@main/ray-editor.css">
  
  <!-- RayEditor JS -->
  <script src='https://cdn.jsdelivr.net/gh/yeole-rohan/ray-editor@main/ray-editor.js'></script>

2. Add an Editor Container

<div id="editor"></div>

3. Initialize RayEditor


const editor = new RayEditor('editor', {
    bold: true,
    italic: true,
    underline: true,
    strikethrough: true,
    redo: true,
    undo: true,
    headings: true,
    lowercase: true,
    uppercase: true,
    superscript: true,
    subscript: true,
    orderedList: true,
    unorderedList: true,
    toggleCase: true,
    codeBlock: true,
    codeInline: true,
    imageUpload: {
        imageUploadUrl: '/upload-file/',
        imageMaxSize: 20 * 1024 * 1024 // 20MB
    },
    fileUpload: {
        fileUploadUrl: '/upload-file/',
        fileMaxSize: 20 * 1024 * 1024 // 20MB
    },
    textColor: true,
    backgroundColor: true,
    link: true,
    table: true,
    textAlignment: true
});

Upload Endpoint Requirements

Your '/upload-file/' endpoint should return JSON with a url property containing the path to the uploaded file.

📥 setRayEditorContent(content)

This function sets the content of the editor dynamically. It replaces the current content with the provided HTML string.

Usage:

// Replace editor content with custom HTML
    setRayEditorContent('<p>Hello, RayEditor!</p>');

Note: Use valid HTML to ensure proper rendering in the editor.

📤 getRayEditorContent()

This function retrieves the current HTML content of the editor. It's useful for saving or previewing the editor content.

Usage:

// Get HTML content from the editor
    const content = getRayEditorContent();
    console.log(content);

Returns: A string containing the editor's inner HTML.

Why Choose RayEditor?

Lightweight

Zero external dependencies, fast loading.

Customizable

Adaptable toolbar, features & appearance.

Framework Agnostic

Works with any JavaScript framework.

Benefits

Lightweight

Minimal footprint with zero external dependencies, fast loading times.

Customizable

Toolbar, features, and appearance can be tailored to your needs.

Framework Agnostic

Works with any JavaScript framework or vanilla JS projects.

Resources