marcellov7 / tex

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.
MIT License
255 stars 2 forks source link
lightweight rich-text rich-text-editor tiny wysiwyg wysiwyg-editor wysiwyg-html-editor
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

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>
  2. 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

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

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.