https://github.com/bberkay/lightweight-wysiwyg-editor
Simple, lightweight, easy to use and easy to customize WYSIWYG Editor.
https://github.com/bberkay/lightweight-wysiwyg-editor
css html javascript wysiwyg
Last synced: 5 months ago
JSON representation
Simple, lightweight, easy to use and easy to customize WYSIWYG Editor.
- Host: GitHub
- URL: https://github.com/bberkay/lightweight-wysiwyg-editor
- Owner: bberkay
- License: mit
- Created: 2024-06-24T00:35:15.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-06-26T13:55:27.000Z (11 months ago)
- Last Synced: 2024-06-27T02:10:37.809Z (11 months ago)
- Topics: css, html, javascript, wysiwyg
- Language: JavaScript
- Homepage: https://bberkay.github.io/lightweight-wysiwyg-editor/
- Size: 24.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Lightweight WYSIWYG Editor
### Table of Contents
1. [Introduction](#introduction)
2. [Features](#features)
3. [Usage](#usage)
4. [Customization](#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.
## Usage
#### Quick Start
```html
// Initialize the editor
const editor = new WYSIWYGEditor('editor');
editor.init();
```
#### 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
```html
const editorFixed = new WYSIWYGEditor('wysiwyg-editor-fixed-example');
editorFixed.init();
```
#### 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
```html
const editorPopover = new WYSIWYGEditor('wysiwyg-editor-popover-example', { displayMode: DisplayMode.Popover });
editorPopover.init();
```
#### 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
```html
const editorTooltip = new WYSIWYGEditor('wysiwyg-editor-tooltip-example', { displayMode: DisplayMode.Tooltip });
editorTooltip.init();
```
#### 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.
setHTMLContent(content: string)
Set the content of the body's innerHTML.
setTextContent(content: string)
Set the content of the body's innerText.
addHTMLContent(content: string)
Add content to the body's innerHTML.
addTextContent(content: string)
Add content to the body's innerText.
addFullHTMLPage(content: string):
Add full HTML page to the editor(this will be added inside the iframe tag)
clearContent()
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:
```html
WYSIWYG Editor
Write something here...
const editorTooltip = new WYSIWYGEditor('wysiwyg-editor-fixed-example', { displayMode: DisplayMode.Fixed });
editorTooltip.init();
```
[email protected]