A lightweight and simple WYSIWYG editor written in vanilla ES6 with no dependencies.
- Lightweight (around 12KB 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
(Work in progress)
- Add support for custom CSS classes
- Theming
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.
The content of an editor can be retrieved simply by reading the value property of the original textarea element:
const content = document.querySelector('#demo1').value;Alternatively, the onChange function can be used to achieve the same result (see below).
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)
});Clone the git repo:
git clone git@github.com:mdbassit/Wysi.gitEnter the Wysi directory and install the development dependencies:
cd Wysi && npm installRun the build script:
npm run buildThe 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 watchIf 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.
Copyright (c) 2023 Momo Bassit.
Wysi is licensed under the MIT license.