✨ Features

Everything you need in a lightweight package

🪶

Lightweight

Only ~7KB total (JS + CSS). No jQuery, no frameworks, just vanilla JavaScript ES6.

📦

Zero Dependencies

Works out of the box. Only requires Font Awesome for toolbar icons (optional).

🔄

Multiple Instances

Create unlimited editor instances on the same page with independent settings.

📐

Resizable

Dynamically resize editors via API. Images inside the editor are also drag-resizable.

💻

Source View

Toggle between WYSIWYG and raw HTML source view with a single click.

📝

Form Integration

Syncs automatically with hidden textarea for seamless form submission.

🎮 Live Demo

Try out multiple editors on the same page

Editor 1 (500x250)

Editor 2 (400x200)

🚀 Quick Start

Get up and running in under 2 minutes

Download the files

Download editor.js and editor.css to your project folder.

Project Structure

your-project/
├── editor.js      (5.5 KB)
├── editor.css     (2.1 KB)
└── index.html

Include dependencies

Add Font Awesome (for icons) and the editor files to your HTML.

index.html

<!-- In your <head> -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="editor.css">

<!-- Before closing </body> -->
<script src="editor.js"></script>

Create the editor markup

Add a div with data-editor attribute and a hidden textarea for form submission.

HTML

<form action="your-handler.php" method="post">
    <!-- Editor container -->
    <div class="editor" data-editor="myEditor"></div>
    
    <!-- Hidden textarea for form submission -->
    <textarea name="myEditor" style="display:none;"></textarea>
    
    <button type="submit">Submit</button>
</form>

Initialize the editor

Initialize all editors with one line of code.

JavaScript

document.addEventListener("DOMContentLoaded", () => {
    // Initialize all editors on the page
    WYSIWYGEditor.initAll(".editor");
});

📚 Multiple Editors

Creating multiple independent editors on the same page

multiple-editors.html

<!-- First Editor -->
<div class="editor" data-editor="editor1"></div>
<textarea name="editor1" style="display:none;"></textarea>

<!-- Second Editor -->
<div class="editor" data-editor="editor2"></div>
<textarea name="editor2" style="display:none;"></textarea>

<!-- Third Editor with custom size -->
<div class="editor" data-editor="editor3" style="width:400px;height:300px;"></div>
<textarea name="editor3" style="display:none;"></textarea>

<script>
document.addEventListener("DOMContentLoaded", () => {
    // Initialize all editors at once
    WYSIWYGEditor.initAll(".editor");
    
    // Access individual editors for customization
    const editor1 = document.querySelector('[data-editor="editor1"]').__wysiwygEditor__;
    editor1.updateSize(600, 400);
    
    const editor2 = document.querySelector('[data-editor="editor2"]').__wysiwygEditor__;
    editor2.updateSize(500, 300);
});
</script>

📖 API Reference

Methods and properties

Static Methods

Method	Description
`WYSIWYGEditor.initAll(selector)`	Initialize all elements matching the CSS selector as editors

Instance Methods

Method	Description
`updateSize(width, height)`	Dynamically update the editor dimensions
`insertLink()`	Prompt user to insert a hyperlink
`insertImage()`	Prompt user to insert an image by URL
`toggleSource()`	Toggle between WYSIWYG and source HTML view

Accessing Editor Instance

JavaScript

// Get editor instance by data-editor attribute
const editor = document.querySelector('[data-editor="myEditor"]').__wysiwygEditor__;

// Use instance methods
editor.updateSize(800, 500);
editor.toggleSource();

🛠️ Toolbar Buttons

Built-in formatting options

Icon	Action	Description
	Bold	Make selected text bold
	Italic	Make selected text italic
	Underline	Underline selected text
	Align Left	Align text to the left
	Align Center	Center align text
	Align Right	Align text to the right
	Unordered List	Create a bulleted list
	Ordered List	Create a numbered list
	Insert Link	Add a hyperlink to selected text
	Insert Image	Insert an image by URL
	Source View	Toggle HTML source code view

📥 Download

Get the files and start building

Download editor.js Download editor.css

Or use CDN (coming soon)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/stephantheron/steditor@latest/editor.css">
<script src="https://cdn.jsdelivr.net/gh/stephantheron/steditor@latest/editor.js"></script>

📜 License

MIT License - Free for personal and commercial use

Copyright © 2024 Stephan Theron

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.