TEX is a ultra-lightweight and straightforward JavaScript library for creating rich text editors (WYSIWYG) directly in the browser. It is designed to work with both <textarea> and <div> elements.

Live demo: https://codepen.io/marcellov7/pen/BabGydp

Key Features

• Pure JavaScript, no dependencies, written in ES6.
• Simple and intuitive user interface.
• Wide selection of predefined buttons for text formatting.
• Support for inserting HTML directly into the editor.
• Support for plugins.
• Easily Customizable themes to fit your website design.
• Ultra lightweight and fast.
• Light and dark mode.

Comparisons

| library | size (min+gzip) | size (min) | jquery | bootstrap | react | link | |---------------|-----------------|------------|--------|-----------|-------|------| | TEX | 2.4kB | 6.6kB | | | | https://github.com/marcellov7/tex | | quill | 43kB | 205kB | | | | https://github.com/quilljs/quill | | trix | 47kB | 204kB | | | | https://github.com/basecamp/trix | | ckeditor | 163kB | 551kB | | | | https://ckeditor.com | | trumbowyg | 8kB | 23kB | x | | | https://github.com/Alex-D/Trumbowyg | | summernote | 26kB | 93kB | x | x | | https://github.com/summernote/summernote | | froala | 52kB | 186kB | x | | | https://github.com/froala/wysiwyg-editor | | tinymce | 157kB | 491kB | x | | | https://github.com/tinymce/tinymce |

How to Use TEX

You can use TEX either via a <script> tag (CDN) or by installing it from npm.

Option 1 — CDN / <script> tag

1. Link TEX to your HTML:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/marcellov7/tex@main/src/tex.min.css">
<script src="https://cdn.jsdelivr.net/gh/marcellov7/tex@main/src/tex.min.js"></script>

The library is then available as the global window.tex.

Option 2 — npm (bundlers, React, Vue, etc.)

npm install tex-editor

import tex from 'tex-editor'
// don't forget the stylesheet:
import 'tex-editor/tex.css'

Then add HTML elements where you want to display the text editors:

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

Usage

Initialization

To initialize TEX, use the tex.init() method, passing in an object with the desired settings. Here's how you can do it:

const tex = window.tex;

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

API

// ES6 (after `npm install tex-editor`)
import tex from 'tex-editor'
// or
import { exec, init, destroy, getContent, setContent } from 'tex-editor'

Parameters

• element: The HTML element (either <textarea> or <div>) to be converted into a text editor.
• buttons: An array of buttons to be displayed in the editor toolbar.
• plugins: An array of plugins.
• defaultParagraphSeparator : 'p', // optional, default = 'div'
• cssStyle: false | true, // Outputs instead of
• theme: 'dark' | default (light),
• ariaLabel: Accessible label for the editable area (optional, default = 'Rich text editor').
• onChange: A callback function to be executed when the content of the editor changes.

Get Content

tex.getContent(document.getElementById("editor"));

Set Content

tex.setContent(document.getElementById("editor"), "<p>Text in <strong>HTML</strong> format</p>")

Exec

// Execute a document command.
// Reference: https://developer.mozilla.org/en/docs/Web/API/Document/execCommand
tex.exec(command<string>, value<string>)

Destroy

tex.destroy(document.getElementById("editor"));

Usage in React

TEX works on a real DOM node, so in React you initialize it inside useEffect using a ref, and tear it down in the cleanup function.

import { useEffect, useRef } from 'react'
import tex from 'tex-editor'
import 'tex-editor/tex.css'

export default function TexEditor({ value = '', onChange }) {
  const ref = useRef(null)

  useEffect(() => {
    const element = ref.current
    tex.init({
      element,
      buttons: ['bold', 'italic', 'underline', 'heading1', 'link', 'html'],
      theme: 'light',
      onChange,
    })
    if (value) tex.setContent(element, value)

    return () => tex.destroy(element)
  }, [])

  // The element MUST have a unique `id` — TEX uses it internally.
  return <div id="my-tex-editor" ref={ref} />
}

Run tex.init only once (empty dependency array). Use tex.setContent / tex.getContent to read or update the content afterwards. The target element must have a unique id, since TEX relies on it to manage the editor instance.

List of predefined 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

Plugins

Plugin demo: https://codepen.io/marcellov7/pen/poYqEMV

var pluginImageUpload = {
    name: 'pluginImageUpload',
    icon: '-↑-',
    title: 'Image Upload',
    result: function(res) {
        //Example function to display an input and upload the image.
    }
};

Initialise the button in the position you want and the plugin, like this:

 tex.init({
    element: document.getElementById("editor"),
    buttons: ['pluginImageUpload', 'bold', 'fontSize', 'bold', 'italic'],
    plugins: [pluginImageUpload],
    onChange: () => {
    }
});

Styles

For example: If you want to change the height of the editor after the DOM has been initialized, you can do so by targeting the ".tex-content" class and adjusting the height property in your CSS file.

.tex-content {
    height: 400px;
}

Contributing

If you'd like to contribute to TEX, follow these steps:

1. Fork this repository.
2. Create a new branch for your changes: git checkout -b feature/new-feature.
3. Commit your changes: git commit -am 'Add new feature'.
4. Push your branch: git push origin feature/new-feature.
5. Submit a pull request for your changes.

License

TEX is released under the MIT License.