Text Editor

Features

Start

<!DOCTYPE html>
<html dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
    <p><textarea></textarea></p>
    <script src="text-editor.min.js"></script>
    <script>
    var editor = new TE(document.querySelector('textarea'));
    </script>
  </body>
</html>

Configure

new TE(self, dent = '\t')

Instance

All editor instances will be stored in TE.__instance__. To iterate the instances is possible with TE.each:

TE.each(function(key, any) {
    console.log(key);
    console.log(this.target);
});

Methods and Properties

editor.self

Return the <textarea> element.

editor.value

Return the initial value of the <textarea> element.

editor.set(value)

Set value to the <textarea> element.

editor.reset()

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

editor.get([default = ""])

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

editor.$([key[, default]])

Get current text selection data.

If key is defined, then the property with the same name as the key value will be returned, if no key available in the selection data or if the value can be evaluated to boolean false, then the default value will be returned.

// `a|b|c`
var s = editor.$(),
    value = editor.$('value', 1),
    foo = editor.$('foo', 1);
console.log([s, value, foo]); // [{"start":1,"end":2,"value":"b","before":"a","after":"c","length":1},"b",1]

editor.save([key = 0])

Save current state.

editor.restore([key = 0[, default]])

Restore the previously saved state.

editor.focus([mode = 0])

Focus to the <textarea>.

editor.focus(); // just focus
editor.focus(-1); // focus start
editor.focus(1); // focus end
editor.focus(true); // select all

editor.blur()

Blur from the <textarea>.

editor.select([a[, b])

Set selection range.

editor.select(); // just select the current selection
editor.select(2); // move caret to the index `2`
editor.select(0, 2); // select from range `0` to `2`

editor.match(pattern[, fn])

Match current selection with the pattern provided.

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

Do something with the current matched selection.

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

editor.match(/^\s*:\w+:\s*$/, function(m) {
    if (m[0] && maps[TE.t(m[0])]) {
        this.insert(maps[TE.t(m[0])]); // → demo
    }
});

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

var 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.replace(pattern, str[, mode = 0])

Replace current selection with str.

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

editor.insert(str[, mode = 0[, clear = false]])

Insert str 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

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

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.peel(/<+/, />+/); // remove any `<` before selection and any `>` after selection
editor.peel(/<+/, />+/, true); // remove any `<` at selection start and any `>` at selection end

editor.dent([mode = 1[, by = '\t'[, include_empty_lines = false]]])

Indent/outdent current selection with by.

editor.dent(); // indent with `\t`
editor.dent(-1); // outdent from `\t`
editor.dent(1, '****'); // indent with `****`
editor.dent(-1, '****'); // outdent from `****`
editor.dent(-1, /[\t ]+/); // outdent from any length of white-space

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-spaces before and after selection, start and end of selection
editor.trim(false, false); // remove any white-spaces at the start and end of selection
editor.trim("", "", false, false); // remove any white-spaces 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

Examples