Editor Teks

fitur

Perpustakaan cahaya. Tidak ada ketergantungan. Editor Teks menggunakan bahasa JavaScript biasa.
API yang kuat . Mudah untuk dipelajari.
Extensible → coba lihat
Tidak ada retasan Tidak ada deteksi fitur. Dioptimalkan untuk browser modern dengan fitur JavaScript bawaannya.
Buatlah milikmu sendiri. Fungsionalitas inti sudah cukup untuk membantu Anda membuat editor teks Anda sendiri.

Mulai

<!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>

Konfigurasikan

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

diri → elemen area teks
lekukan → karakter lekukan default untuk editor.dentmetode

Contoh

Semua instance editor akan disimpan TE.__instance__. Untuk mengulangi instans dimungkinkan dengan TE.each:

TE.each(function(key) {
    console.log(key);
    console.log(this.self);
});

ini → mengacu pada contoh editor
key → mengacu pada nilai target editor idatau nameatribut, atau urutannya saat ini

Metode dan Properti

`editor.self`

Kembalikan <textarea>elemen.

`editor.value`

Kembalikan nilai awal <textarea>elemen.

`editor.set(value)`

Tetapkan nilai ke <textarea>elemen.

`editor.reset()`

Atur ulang nilai ke nilai awal <textarea>elemen.

`editor.get([default = ""])`

Dapatkan nilai <textarea>elemen saat ini jika tidak kosong, jika tidak, kembali default.

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

Dapatkan data pemilihan teks saat ini.
Jika keydidefinisikan, maka properti dengan nama yang sama dengan keynilai akan dikembalikan, jika tidak ada kunci yang tersedia dalam data seleksi atau jika nilai dapat dievaluasi menjadi boolean false, maka defaultnilai akan dikembalikan.

// `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])`

Simpan status saat ini.

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

Pulihkan keadaan yang sebelumnya disimpan.

`editor.focus([mode = 0])`

Fokus ke <textarea>.

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

`editor.blur()`

Kabur dari <textarea>.

`editor.select([a[, b])`

Tetapkan rentang pilihan.

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])`

Sesuaikan pilihan saat ini dengan pola yang disediakan.

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

Lakukan sesuatu dengan pilihan yang cocok saat ini.

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

Cocokkan dengan karakter sebelum pemilihan, pemilihan saat ini dan karakter setelah pemilihan.

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])`

Ganti pilihan saat ini dengan 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]])`

Masukkan str untuk (mengganti) pilihan saat ini.

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])`

Bungkus pilihan saat ini dengan buka dan tutup .

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

`editor.peel(open, close[, wrap = false])`

Buka bungkusan pilihan saat ini dari buka dan tutup .

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 seleksi saat ini dengan oleh .

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]]]])`

Pangkas pilihan saat ini dari spasi putih, dan secara opsional masukkan karakter pada titik yang ditentukan.

// `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