Lightweight WYSIWYG Editor for Modern Web Apps – RayEditor

Preview:

Description:

RayEditor is a lightweight WYSIWYG editor that transforms plain content areas into feature-rich text editors with zero dependencies.

It is useful if you need more than a plain textarea but less than a full-blown document editor like Google Docs. Think blog post creation, CMS content fields, simple documentation tools, or even formatted comment sections.

Features

• Standard Text Formatting: Bold, Italic, Underline, Strikethrough.
• Case Transformation: Uppercase, Lowercase, Toggle Case.
• Text Styles: Subscript, Superscript, Text Color, Background Color, Alignment.
• Structure: Headings (H1-H6), Ordered/Unordered Lists.
• Code Editing: Inline code highlighting and multi-line code blocks.
• Media: Image and File uploads with configurable endpoints and size limits. Image resizing is included.
• Tables: Basic table creation and manipulation (add/delete rows/columns).
• History: Undo/Redo functionality.
• Links: Add and edit hyperlinks.

How to use it:

1. Download the package and load the RayEditor’s JavaScript & files in the document.

<link rel="stylesheet" href="ray-editor.css" />
<script src="ray-editor.js"></script>

2. Place an empty div (or another block element) in your HTML where you want the editor to appear. Give it an ID so you can target it with JavaScript.

<div id="myEditor"></div>

3. Call the RayEditor function to create a basic WYSIWYG editor:

const editor = new RayEditor('editor', {
  // options here
});

4. Configure the editor with the following options:

const editor = new RayEditor('editor', {
  // Text formatting
  bold: true,
  italic: true,
  underline: true,
  strikethrough: true,
  
  // History controls
  redo: true,
  undo: true,
  
  // Structure elements
  headings: true,
  orderedList: true,
  unorderedList: true,
  
  // Text transformations
  lowercase: true,
  uppercase: true,
  toggleCase: true,
  
  // Typography
  superscript: true,
  subscript: true,
  
  // Code formatting
  codeBlock: true,
  codeInline: true,
  
  // Media uploads
  imageUpload: {
    imageUploadUrl: '/upload-blog-file/',
    imageMaxSize: 20 * 1024 * 1024 // 20MB
  },
  fileUpload: {
    fileUploadUrl: '/upload-file/',
    fileMaxSize: 20 * 1024 * 1024 // 20MB
  },
  
  // Styling options
  textColor: true,
  backgroundColor: true,
  
  // Additional features
  link: true,
  table: true,
  textAlignment: true
  
});

5. Programmatically load HTML content into the editor.

editor.setRayEditorContent('<h2>My Loaded Title</h2><p>Some initial content.</p>');

6. Retrieves the current HTML content within the editor. You’ll call this when you need to save the data, like during a form submission.

const currentHtml = editor.getRayEditorContent();

Changelog:

08/20/2025

• code fixes and improements

08/04/2025

• Implement Toggleable Source Code Button

05/28/2025

• code fixes and improements

05/27/2025

• Add a chck to ensure the codeblock insertion

05/23/2025

• JS update

05/13/2025

• css, pre and code fix