Wysi

A lightweight and simple WYSIWYG editor written in vanilla ES6 with no dependencies.

View demo

This is an early release. Use in production is NOT YET RECOMMENDED.

Features

• Lightweight (around 10KB minified and gzipped)
• Zero dependencies
• Very easy to use
• Customizable
• Dark mode support
• Auto grow editor instances to fit content
• Filters content when pasting
• Works on all modern browsers

Getting Started

Basic usage

Download the latest version, and add the script and style to your page:

<link rel="stylesheet" href="wysi.min.css"/>
<script src="wysi.min.js"></script>

Or include from a CDN (not recommended in production):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mdbassit/Wysi@latest/dist/wysi.min.css"/>
<script src="https://cdn.jsdelivr.net/gh/mdbassit/Wysi@latest/dist/wysi.min.js"></script>

Then create an editor instance using a CSS selector pointing to one or more textarea elements:

<textarea id="demo1"></textarea>
<script>
Wysi({
  el: '#demo1'
})
</script>

This will convert the textarea element to a WYSIWYG editor with the default settings.

Customizing the editor

The editor can be configured by calling Wysi() and passing an options object to it. Here is a list of all the available options:

Wysi({
  
  // A selector pointing to one or more textarea elements to convert into WYSIWYG editors.
  // This can also accept a Node, a NodeList, an HTMLCollection or an array of DOM elements.
  el: '.richtext',

  // Enable dark mode. This only affects the toolbar, not the content area.
  darkMode: false,

  // The height of the editable region.
  height: 200,

  // Grow the editor instance to fit its content automatically.
  // The height option above will serve as the minimum height.
  autoGrow: false,
  
  // Automatically hide the toolbar when the editable region is not focused.
  autoHide: false,

  // A function that is called whenever the content of the editor instance changes.
  // The  new content is passed to the function as an argument.
  onChange: (content) => console.log(content)
});

Building from source

Clone the git repo:

git clone [email protected]:mdbassit/Wysi.git

Enter the Wysi directory and install the development dependencies:

cd Wysi && npm install

Run the build script:

npm run build

The built version will be in the dist directory in both minified and full copies.

Alternatively, you can start a gulp watch task to automatically build when the source files are modified:

npm run watch

Contributing

If you find a bug or would like to implement a missing feature, please create an issue first before submitting a pull request (PR).

When submitting a PR, please do not include the changes to the dist directory in your commits.

License

Copyright (c) 2023 Momo Bassit.
Wysi is licensed under the MIT license.