kod pelaksanaan editor teks javascript

Tulis artikel bahasa Cina lebih daripada 1800 perkataan dengan tajuk berikut:

Kod pelaksanaan editor teks JavaScript

JavaScript ialah bahasa skrip yang digunakan secara meluas dalam pembangunan Web Kelebihan terbesar ialah itu anda boleh menukar bahagian tertentu halaman secara dinamik tanpa memuatkan semula keseluruhan halaman. Editor teks adalah salah satu alat yang paling biasa digunakan oleh pengaturcara. JavaScript boleh membantu kami menulis editor yang mudah digunakan yang boleh melaksanakan fungsi penyuntingan teks. Artikel ini akan memperkenalkan kod untuk melaksanakan editor teks melalui JavaScript.

1. Laksanakan kotak teks

Mula-mula, kita perlu memasukkan kotak teks dalam kod HTML dan menetapkan ID untuknya untuk panggilan JavaScript berikutnya.

<textarea id="editor"></textarea>

2. Laksanakan butang menu

Fungsi biasa editor termasuk: buat, buka, simpan, salin, tampal, potong, dsb. Untuk melaksanakan fungsi ini, kita perlu mencipta butang menu yang sepadan. Kod untuk menambah butang menu dalam HTML adalah seperti berikut:

<button onclick="newFile()">新建</button>
<button onclick="openFile()">打开</button>
<button onclick="saveFile()">保存</button>
<button onclick="copyText()">复制</button>
<button onclick="pasteText()">粘贴</button>
<button onclick="cutText()">剪切</button>

Perlu diperhatikan di sini bahawa fungsi onclick dipanggil melalui JavaScript.

3. Laksanakan fungsi dalam editor

1. Fungsi fail baharu

Fungsi fail baharu sebenarnya mengosongkan nilai kotak teks. Dilaksanakan melalui kod berikut:

function newFile() {
  document.getElementById("editor").value = "";
}

2. Buka fungsi fail

Intipati fungsi fail terbuka adalah untuk membaca teks fail tempatan ke dalam kotak teks untuk diedit. Memandangkan JavaScript tidak boleh mengakses sistem fail tempatan secara langsung, kami perlu memilih fail melalui <input type="file">. Berikut ialah pelaksanaan kod untuk membuka fail:

function openFile() {
  var fileInput = document.createElement("input");
  fileInput.type = "file";

  fileInput.addEventListener("change", function () {
    var file = fileInput.files[0];
    var reader = new FileReader();

    reader.onload = function () {
      document.getElementById("editor").value = reader.result;
    }

    reader.readAsText(file);
  });

  fileInput.click();
}

Perlu diperhatikan di sini bahawa API FileReader membenarkan kami membaca fail terus pada klien tanpa memuat naiknya ke pelayan.

3. Fungsi Simpan fail

Intipati fungsi simpan fail adalah untuk memuat turun teks dalam kotak teks ke komputer setempat dan menyimpannya sebagai nama fail yang ditentukan. Berikut ialah kod untuk fungsi simpan fail:

function saveFile() {
  var element = document.createElement("a");
  var text = document.getElementById("editor").value;
  var file = new Blob([text], { type: 'text/plain' });

  element.href = URL.createObjectURL(file);
  element.download = "filename.txt";
  element.click();
}

Objek Blob dan kaedah URL.createObjectURL() digunakan di sini. Objek Blob digunakan untuk mewakili objek seperti fail data mentah yang tidak boleh diubah. Kaedah URL.createObjectURL() mencipta URL daripada objek Blob.

4. Fungsi salin, tampal dan potong

Tiga fungsi ini adalah untuk mengendalikan kandungan dalam kotak teks dan dilaksanakan dengan cara yang sama Berikut ialah fungsi salin sebagai contoh:

function copyText() {
  document.execCommand("copy");
}

Fungsi document.execCommand() digunakan di sini untuk melaksanakan arahan tersuai.

4. Laksanakan kekunci pintasan

Kekunci pintasan ialah salah satu fungsi biasa editor dan boleh meningkatkan kecekapan pengendalian. Lima kekunci pintasan dilaksanakan di bawah:

document.onkeydown = function (event) {
  if (event.ctrlKey && event.keyCode === 78) { // CTRL + N
    newFile();
  } else if (event.ctrlKey && event.keyCode === 79) { // CTRL + O
    openFile();
  } else if (event.ctrlKey && event.keyCode === 83) { // CTRL + S
    event.preventDefault();
    saveFile();
  } else if (event.ctrlKey && event.keyCode === 67) { // CTRL + C
    copyText();
  } else if (event.ctrlKey && event.keyCode === 86) { // CTRL + V
    pasteText();
  } else if (event.ctrlKey && event.keyCode === 88) { // CTRL + X
    cutText();
  }
}

Dalam kod di atas, event.ctrlKey dan event.keyCode tentukan Ctrl dan kod kekunci kunci masing-masing.

5. Ringkasan

Kod di atas melaksanakan editor teks mudah melalui JavaScript, termasuk fungsi biasa seperti mencipta, membuka, menyimpan, menyalin, menampal dan memotong. Sebagai peminat pengaturcaraan, kami boleh mengembangkan lebih banyak fungsi berdasarkan ini, dan juga melaksanakan editor kod yang lengkap.

Atas ialah kandungan terperinci kod pelaksanaan editor teks javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!