Lightweight WYSIWYG Editor

Live Demo

Table of Contents

1. Introduction
2. Features
3. Installation
4. Usage
5. Customization

Introduction

A simple and lightweight WYSIWYG editor written in vanilla JavaScript. Designed to be easy to use and easy to customize. A simple and lightweight WYSIWYG editor written in vanilla JavaScript. Designed to be easy to use and easy to customize.

Features

• Different toolbar behavior modes consisting of DisplayMode.Fixed, DisplayMode.Popover, and DisplayMode.Tooltip.
• Customizable toolbar layout, buttons, and styles.
• Drag and drop image upload, copy-paste link on selected text, and more.

Installation

1- Install the package via npm: npm install @bberkay/wysiwygeditor

import { WYSIWYGEditor, DisplayMode } from '@bberkay/wysiwygeditor'
/*
Alternatively, you can use CommonJS syntax:
const { WYSIWYGEditor, DisplayMode } = require('@bberkay/wysiwygeditor');
*/

document.querySelector<HTMLDivElement>('#root')!.innerHTML = `
    <div id = "body"></div>
`

const wysiwygeditor = new WYSIWYGEditor("body");
wysiwygeditor.init();

2- or via CDN like this: https://cdn.jsdelivr.net/npm/@bberkay/wysiwygeditor@latest

<html>
    <body>
        <div id="body"></div>

        <script src="https://cdn.jsdelivr.net/npm/@bberkay/wysiwygeditor@latest"></script>
        <script>
            const editor = new WYSIWYGEditor('body');
            editor.init();
        </script>
    </body>
</html>

Usage

Fixed Display Mode

• The fixed editor is initialized with the fixed display mode(default)
• The fixed display mode is triggered when the editor is loaded

<!-- Without any customization -->
<div id="wysiwyg-editor-fixed-example"></div>

<script>
    const editorFixed = new WYSIWYGEditor('wysiwyg-editor-fixed-example');
    editorFixed.init();
</script>

Popover Display Mode

• The popover editor is initialized with the popover display mode
• The popover display mode is triggered when the toolbar button is clicked

<!-- Without any customization -->
<div id="wysiwyg-editor-popover-example"></div>

<script>
    const editorPopover = new WYSIWYGEditor('wysiwyg-editor-popover-example', { displayMode: DisplayMode.Popover });
    editorPopover.init();
</script>

Tooltip Display Mode

• The tooltip editor is initialized with the tooltip display mode
• The tooltip display mode is triggered when the toolbar button is hovered

<!-- Without any customization -->
<div id="wysiwyg-editor-tooltip-example"></div>

<script>
    const editorTooltip = new WYSIWYGEditor('wysiwyg-editor-tooltip-example', { displayMode: DisplayMode.Tooltip });
    editorTooltip.init();
</script>

Public Methods

Method	Description
init()	Initialize the editor.
getTextContent()	Get the content of the body's innerText.
getHTMLContent()	Get the content of the body's innerHTML.
addFullHTMLPage(content: string):	Add full HTML page to the editor(this will be added inside the iframe tag)
clear()	Clear the content of the body.
onChange(callback: (data: string) => void)	Listen to the changes in the editor.

Customization

• You can customize the toolbar by creating a new toolbar inside the wysiwyg-toolbar div. The only thing you need to do is to add the data-command and data-value attributes to the buttons. Also, default layout can be changed from the wysiwyg.js file.
• Initial content can be set by adding the content inside the div that has the class wysiwyg-body.
• For customizing the styles, you can add your own styles to the wysiwyg.css file.

For example:

<!-- With customization -->
<div id="wysiwyg-editor-fixed-example">
    <div class="wysiwyg-toolbar">
        <div class="wysiwyg-toolbar-group">
            <div class="wysiwyg-toolbar-dropdown">
                <div class="wysiwyg-toolbar-dropdown-toggle">
                    <span>Normal</span>
                </div>
                <div class="wysiwyg-toolbar-dropdown-content">
                    <button data-command="fontSize" data-value="7">Huge</button>
                    <button data-command="fontSize" data-value="5">Large</button>
                    <button data-command="fontSize" data-value="3">Normal</button>
                    <button data-command="fontSize" data-value="1">Small</button>
                </div>
            </div>
            <div class="wysiwyg-toolbar-dropdown">
                <div class="wysiwyg-toolbar-dropdown-toggle">
                    <span>Sans-Serif</span>
                </div>
                <div class="wysiwyg-toolbar-dropdown-content">
                    <button data-command="fontName" data-value="sans-serif" style="font-family:sans-serif;">Sans-Serif</button>
                    <button data-command="fontName" data-value="serif" style="font-family:serif;">Serif</button>
                    <button data-command="fontName" data-value="monospace" style="font-family:monospace;">Monospace</button>
                </div>
            </div>
        </div>
        <div class="wysiwyg-toolbar-group">
            <button data-command="bold" style="font-weight:bold;">B</button>
            <button data-command="italic" style="font-style:italic;">I</button>
            <button data-command="underline" style="text-decoration:underline;">U</button>
            <button data-command="strikeThrough" style="text-decoration:line-through;">S</button>
        </div>
    </div>
    <div class="wysiwyg-body">
        <h3>WYSIWYG Editor</h3>
        <p>Write something here...</p>
    </div>
</div>

<script>
    const editorTooltip = new WYSIWYGEditor('wysiwyg-editor-fixed-example', { displayMode: DisplayMode.Fixed });
    editorTooltip.init();
</script>

---

berkaykayaforbusiness@gmail.com