Ultra-light WYSIWYG Rich Text Editor – Tex.js

Preview:

Description:

Tex.js is an ultra-lightweight JavaScript library that provides a simple API for turning textareas and/or divs into full-featured WYSIWYG editors.

Built with ES6 and requirs no dependencies, this library simplifies implementing rich text editors for blogs, comments, rich text fields, and more. Its speed and small size make it ideal for web apps where performance matters. The easy API and plugin system save development time. Light and dark modes adapt for user preference. For projects needing a capable editor without complex overhead, TEX checks all the boxes.

How to use it:

1. Import the Tex.js into your web project.

// ES
import tex from 'tex'
// Browser
<link rel="stylesheet" href="/src/tex.min.css">
<script src="/src/tex.min.js"></script>

2. Initialize the Tex editor on the textarea or div element you specify.

<div id="editor">
  Start Editing
</div>
<!--or-->
<textarea id="editor">
  Start Editing
</textarea>

const tex = window.tex;
tex.init({
  element: document.getElementById("editor"),
});

3. Enable/disable editor buttons:

• fontSize
• bold
• italic
• underline
• strikethrough
• heading1
• heading2
• paragraph
• removeFormat
• quote
• olist
• ulist
• code
• line
• link
• image
• html
• textColor
• textBackColor
• indent
• outdent
• undo
• redo
• justifyCenter
• justifyFull
• justifyLeft
• justifyRight

tex.init({
  element: document.getElementById("editor"),
  buttons: ['bold', 'italic', 'underline', 'textColor', 'heading1', 'heading2', 'paragraph', 'removeFormat', 'olist', 'ulist', 'code', 'line', 'link', 'image', 'html'],
});

4. More options to customize the editor.

const tex = window.tex;
tex.init({
  element: document.getElementById("editor"),
  paragraphSeparator: 'div',
  cssStyle: true,
  theme: 'light', // or 'dark'
  onChange: (content) => {
    console.log(content);
  }
});

5. Extend the editor using the plugin system:

var myPlugin = {
    name: 'myPlugin',
    icon: '-↑-',
    title: 'Plugin Name',
    result: function(res) {
      // your function here
    }
};
tex.init({
  element: document.getElementById("editor"),
  buttons: ['myPlugin', 'bold', 'fontSize', 'bold', 'italic'],
  plugins: [myPlugin],
});

6. API methods.

// get content
tex.getContent(document.getElementById("editor"));
// execute command
tex.exec(command, value);
// destroy the editor
tex.destroy(document.getElementById("editor"));

Changelog:

04/10/2024

• bugfix

02/27/2024

• fix parent node append textarea