Skip to content
/ tex Public

TEX is a ultra-lightweight and straightforward JavaScript library for creating rich text editors (WYSIWYG) directly in the browser. Pure JavaScript, no dependencies, written in ES6.

License

Notifications You must be signed in to change notification settings

marcellov7/tex

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

34 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Logo

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.

Live demo

Comparisons

library size (min+gzip) size (min) jquery bootstrap react link
TEX 2.3kB 6.3kB 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

To use TEX in your project, follow these simple steps:

  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>
  1. 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
import tex from 'tex'
// or
import { exec, init, destroy, getContent } from 'tex'

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.
  • paragraphSeparator : 'p', // optional, default = 'div'
  • cssStyle: false | true, // Outputs instead of
  • theme: 'dark' | default (light),
  • onChange: A callback function to be executed when the content of the editor changes.

Get Content

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

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"));

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.

About

TEX is a ultra-lightweight and straightforward JavaScript library for creating rich text editors (WYSIWYG) directly in the browser. Pure JavaScript, no dependencies, written in ES6.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published