Do you like this project? Please support my Mecha CMS project too. Thank you!

Text Editor 3.3.10

Text Editor is a simple JavaScript application that aims to provide accessibility improvements to the native HTML <textarea> elements so that users can control and manipulate their data in the text editor as they wish.

It contains very sufficient methods to manipulate the existing text selection range data without providing unnecessary features. This ensures the file size remains small and keeps the scope of learning curve to be narrow, so that you can focus on the results.




<!DOCTYPE html>
<html dir="ltr">
    <meta charset="utf-8">
    <script src="./index.min.js"></script>
      const editor = new TE(document.querySelector('textarea'));


Functions and methods in this application are mostly native JavaScript and are intended for use by the browser. Node.js doesn’t know about the DOM, so this kind of practice will probably be used more often to build new browser packages than to be used directly in the Node.js server.


const TE = require('@taufik-nurrohman/text-editor');

const editor = new TE(document.querySelector('textarea'));


import TE from '@taufik-nurrohman/text-editor';

const editor = new TE(document.querySelector('textarea'));



let editor = new TE(self, tab = '\t');
let editor = new TE(self, state = {
        tab: '\t'
Name Description
self The text area element.
tab The default indent character for editor.pull() and editor.push() method.
state The configuration data. The default indent character for editor.pull() and editor.push() method.

Methods and Properties


Escape regular expression’s special characters.


Return the application instances.

for (let key in TE.instances) {


This property stores the initial values of editor.state.

const editor = new TE({
    foo: ['bar', 'baz', 'qux']

console.log([TE.state, editor.state]);


Return the application version.

let version = TE.version,
    major = version.split('.')[0];

if (+major < 3) { … }


List of regular expression characters to be escaped.


Blur from the <textarea> element.

editor.focus(mode = 0)

Focus to the <textarea> element.

editor.focus(); // Focus to the last selection
editor.focus(-1); // Focus to the start of text area value
editor.focus(1); // Focus to the end of text area value
editor.focus(true); // Select all


Get current value of the <textarea> element if not empty, otherwise, return null.

editor.insert(string, mode = 0, clear = false)

Insert string to (replace) the current selection.

editor.insert(':)'); // Insert at selection (replace selection)
editor.insert('<b>', -1); // Insert before selection
editor.insert('</b>', 1); // Insert after selection
editor.insert(':)', -1, true); // Insert before selection and delete selection
editor.insert(':)', 1, true); // Insert after selection and delete selection


Reset value to the initial value of the <textarea> element.

editor.match(pattern, then)

Match current selection with the pattern provided.

if (editor.match(/^\s*:\w+:\s*$/)) {
    alert('Selection is detected as emoji!'); // → demo

Do something with the current matched selection.

let maps = {
    ':happy:': '😀',
    ':sad:': '😩',
    ':wonder:': '😕'

editor.match(/^\s*:\w+:\s*$/, function(m) {
    let exists = maps[m[0] = m[0] ? m[0].trim() : ""];
    exists && this.insert(exists); // → demo

Match to the characters before selection, current selection and characters after selection.

let test = editor.match([/:$/, /^\w+$/, /^:/]);
console.log(test[0] && test[1] && test[2]);
editor.match([/:$/, /^\w+$/, /^:/], function(before, value, after) {
    console.log([before, value, after]); // → demo

editor.peel(open, close, wrap = false)

Unwrap current selection from open and close.

editor.peel('<', '>'); // Remove `<` before selection and `>` after selection
editor.peel('<', '>', true); // Remove `<` at selection start and `>` at selection end

editor.pull(by =, includeEmptyLines = true)

Outdent current selection from by.

editor.pull(); // Outdent from `\t`
editor.pull('****'); // Outdent from `****`

editor.push(by =, includeEmptyLines = false)

Indent current selection with by.

editor.push(); // Indent with `\t`
editor.push('****'); // Indent with `****`

editor.replace(from, to, mode = 0)

Replace current, before or after selection from from to to.

editor.replace(/<.*?>/g, ""); // Strip HTML tag(s) in selection
editor.replace(/<.*?>/g, "", -1); // Strip HTML tag(s) before selection
editor.replace(/<.*?>/g, "", 1); // Strip HTML tag(s) after selection

Set selection range.; // Is the same as `editor.focus()`; // Move caret to the index `2`, 2); // Select from range `0` to `2`; // Select all


Return the <textarea> element.

editor.self.addEventListener('keydown', e => {
    if (
        (e.key && 'Enter' === e.key) ||
        (e.keyCode && 13 === e.keyCode)
    ) {
        // Do something with `Enter` key!


Set value to the <textarea> element.


Alias of editor.self property.


Return the text editor states if any.

editor.trim(open = "", close = "", start = "", end = "", tidy = true)

Trim current selection from white-spaces, and optionally insert characters at the specified points.

// `a<open><start>b<end><close>c`

editor.trim(); // Remove any white-space(s) before and after selection, start and end of selection
editor.trim(false, false); // Remove any white-space(s) at the start and end of selection
editor.trim("", "", false, false); // Remove any white-space(s) before and after selection
editor.trim(' ', ' '); // Force a space before and after selection
editor.trim('\n\n', '\n\n'); // Force line-break before and after selection
editor.trim('\n\n', '\n\n', "", "", false); // Ignore empty value before and after selection, just insert that `\n\n` away


Return the initial value of the <textarea> element.

editor.wrap(open, close, wrap = false)

Wrap current selection with open and close.

editor.wrap('<', '>'); // Wrap with `<` and `>`
editor.wrap('<', '>', true); // Wrap with `<` and `>` then select


Get current text selection data.

// `abc`
console.log(editor.$()); // `{"after":"c","before":"a","end":2,"length":1,"start":1,"value":"b"}`



Use it for free, pay if you get paid. So, you’ve just benefited financially after using this project? It’s a good idea to share a little financial support with this open source project too. Your support will motivate me to do any further development, as well as to provide voluntary support to overcome problems related to this project.

Thank you! ❤️