Javascript có thể chỉnh sửa tệp văn bản không?

Thêm Plugin mở rộng tệp tùy chỉnh

obsidianmd:master ← MeepTech:patch-1

đã mở 04. 02AM - 24 tháng 10, 22 UTC

MeepTech

+8 -0

# Tôi đang gửi Plugin Cộng đồng mới ## URL Repo Liên kết tới plugin của tôi. https. …//github. com/MeepTech/obsidian-custom-file-extensions-plugin ## Danh sách kiểm tra phát hành * [x] Tôi đã thử nghiệm plugin trên * [x] Windows * [x] macOS * [x] Linux * [ ] Android _(nếu có . js` * [x] `tệp kê khai. kiểu json` * [ ] `. css` _(tùy chọn)_ * [x] Tên bản phát hành GitHub khớp với số phiên bản chính xác được chỉ định trong tệp kê khai của tôi. json (_**Lưu ý. ** Sử dụng số phiên bản chính xác, không bao gồm tiền tố `v`_) * [x] `id` trong `bản kê khai của tôi. json` khớp với `id` trong `plugin cộng đồng. tập tin json`. * [x] README của tôi. md mô tả mục đích của plugin và cung cấp hướng dẫn sử dụng rõ ràng. * [x] Tôi đã đọc các mẹo trong https. //github. com/obsidianmd/obsidian-releases/blob/master/plugin-review. md và đã tự xem lại plugin của mình để tránh những cạm bẫy phổ biến này. * [x] Tôi đã thêm giấy phép vào tệp GIẤY PHÉP. * [x] Dự án của tôi tôn trọng và tương thích với giấy phép gốc của bất kỳ mã nào từ các plugin khác mà tôi đang sử dụng. Tôi đã ghi công thích hợp cho các dự án khác này trong `README. md`.

Mã HTML và JavaScript bên dưới sử dụng một số tính năng của HTML5 (cụ thể là đối tượng “Blob”, API tệp và thuộc tính “tải xuống” của thẻ “a”) để cho phép người dùng tải, chỉnh sửa và lưu tệp . Khi viết bài này, nó hoạt động trên cả trình duyệt Chrome và Firefox, mặc dù đáng buồn là nó yêu cầu một chút mã tùy chỉnh cho mỗi trình duyệt.

Để xem nó hoạt động, hãy sao chép nó vào một. html và mở tệp đó trong trình duyệt web chạy JavaScript. Hoặc, đối với phiên bản trực tuyến, hãy truy cập http. // điều này có thể tốt hơn. thành phố mới. tổ chức/người soạn thảo văn bản. html

CẬP NHẬT 2016/06/13 – Tôi đã cập nhật mã này để phản ánh thực tế là cửa sổ. Đối tượng URL không còn thử nghiệm và do đó không được gọi bằng các tên khác nhau trong các trình duyệt khác nhau. Kết quả là mã sạch hơn một chút

Trong vài năm gần đây, các trình duyệt hiện đại đã có thể khiến chúng ta ngạc nhiên với nhiều tính năng mới tuyệt vời và thật khó để cập nhật tất cả các tính năng mới này. Cá nhân tôi không biết rằng tất cả các trình duyệt chính hiện có quyền truy cập vào một đối tượng API Web mạnh mẽ. Trình đọc tệp. Hôm nay mình sẽ chia sẻ với các bạn trải nghiệm của mình về tính năng trình duyệt này

FileReader cho phép người dùng đọc nội dung tệp trực tiếp trên trình duyệt mà không cần tải tệp lên máy chủ. Tính năng này đã được giới thiệu để cung cấp trải nghiệm người dùng tốt hơn và nó KHÔNG nên thay thế xác thực phía máy chủ

Khi tôi lần đầu tiên phát hiện ra tính năng này, tôi đã rất phấn khích nhưng không thể nghĩ ra bất kỳ trường hợp người dùng cụ thể nào, cho đến khi tôi bắt đầu chơi với nó. Kể từ đó tôi đã có thể sử dụng nó trong các trường hợp người dùng sau

1. Xem trước hình ảnh trước khi tải lên (hình thu nhỏ)

2. Đọc nội dung tệp để trả lại xác thực nhanh cho người dùng ( Ví dụ:. đọc một chuỗi cụ thể hoặc regex)

3. Cung cấp hỗ trợ cho trình duyệt ngoại tuyến

4. Chuyển đổi tệp thành URL dữ liệu

5. Cung cấp phía Khách hàng, Tạo tài liệu

Hôm nay chúng ta sẽ xây dựng một Trình soạn thảo văn bản, trực tiếp trên trình duyệt. Hướng dẫn chi tiết về tất cả các mã cần thiết sẽ được cung cấp trong suốt bài viết, nhưng cần có sự hiểu biết về Javascript để theo dõi bài viết

Công việc hoàn thành sẽ cung cấp các tính năng sau

1. Khả năng tải lên một tập tin văn bản

2. Khả năng sửa đổi nội dung của tệp văn bản

3. Khả năng tải xuống tệp văn bản đã sửa đổi

Hỗ trợ trình duyệt

Như đã đề cập ở trên, hỗ trợ FileReader khá rộng rãi vì nó hiện được hỗ trợ đầy đủ trên tất cả các trình duyệt chính, với hỗ trợ một phần quay trở lại IE10 như được hiển thị trong bảng được cung cấp bởi

FileReader đang hoạt động

Trong chương sau, chúng ta sẽ xây dựng triển khai FileReader đầu tiên của mình. Bước đầu tiên liên quan đến việc khởi tạo đối tượng trình đọc tệp bằng cú pháp hàm tạo đối tượng. Thao tác này sẽ tạo một phiên bản của API Web trình đọc tệp

const reader = new FileReader();

Bây giờ trình đọc của chúng tôi đã được khởi tạo, chúng tôi có thể đính kèm vào một số trình xử lý sự kiện của nó (). Chúng tôi sẽ đề cập đến sự kiện này chi tiết hơn sau trong bài viết

reader.onload = MyLoadFunction
reader.onerror = MyErrorFunction

Điều này cũng có thể đạt được bằng cách sử dụng cú pháp addEventListener()

reader.addEventListener("load", myLoadFunction);
reader.addEventListener("error", myErrorFunction);

Bây giờ là lúc sử dụng phương thức readAsText được cung cấp bởi API(). Mục đích của phương pháp này là đọc nội dung của tệp được cung cấp. Trong suốt quá trình, API FileReader sẽ kích hoạt các sự kiện sẽ kích hoạt các cuộc gọi lại có liên quan (myLoadFunction, myErrorFunction). Các phương thức đọc chấp nhận một đối số dự kiến ​​là một tệp hoặc một đối tượng Blob

reader.readAsText(_file);

Cuối cùng, chúng ta cần khai báo biến _file của mình bằng cách tận dụng API tệp. Không phải lúc nào cũng cần tạo tệp trong Javascript từ đầu, vì FileReader có thể truy cập tệp từ nhiều nguồn (Trình xây dựng tệp, đầu vào của loại tệp, kéo và thả, Canvas, v.v. )

Nếu thành công, mã của chúng tôi ở trên sẽ kích hoạt cuộc gọi lại sự kiện MyLoadFunction của chúng tôi. Phương thức này có quyền truy cập vào kết quả của trình đọc và trạng thái như một phần của các đối số của nó. Gọi lại thành công từ phương thức readAsText sẽ bao gồm các thuộc tính sau

Bảng bên dưới sẽ hiển thị tất cả các sự kiện khác nhau được liên kết với trạng thái và Giá trị. Mã cần thiết để tạo bảng sau có thể được truy cập trên codepen này. https. // codepen. io/zelig880/pen/rEVEpK

Việc triển khai trình đọc tệp đầu tiên của chúng tôi đã hoàn tất và mã có thể được truy cập trên codepen sau. https. // codepen. io/zelig880/pen/EBYwer

Trình chỉnh sửa tệp trình duyệt

Trong chương này, chúng tôi sẽ mở rộng những gì chúng tôi đã viết cho đến nay và biến nó thành một trình soạn thảo tệp văn bản của trình duyệt web

Để đạt được mục tiêu của mình, chúng tôi sẽ phải thực hiện các sửa đổi sau đối với mã hiện tại của mình, bằng cách tận dụng các phương pháp và tính năng khác nhau do API cung cấp

1. Thay đổi đầu ra FileReader thành loại URL dữ liệu

2. Sử dụng URL dữ liệu để cung cấp chức năng tải xuống

3. Cung cấp đầu vào cho khách hàng để cập nhật một số văn bản

4. Sử dụng FileReader để đọc tệp được tải lên bằng đầu vào của loại tệp

5. Tự động cập nhật trường văn bản với nội dung tệp đã tải lên

Thay đổi đầu ra FileReader thành loại URL dữ liệu

Bước đầu tiên của chúng tôi yêu cầu chúng tôi thay đổi phương thức được sử dụng để đọc tệp của chúng tôi. readAsText sẽ được thay thế bằng readAsDataUrl. Phương pháp này sẽ cung cấp cho chúng tôi URL DỮ LIỆU ( url có biểu diễn base64 của tệp của chúng tôi)

 reader.readAsDataURL(_file);

Sử dụng URL dữ liệu để cung cấp chức năng tải xuống

Bản thân URL dữ liệu không hữu ích lắm. Vì vậy, trong phần này, chúng tôi sẽ cung cấp một chức năng rất đơn giản để cho phép tải xuống tệp mới tạo

Để đạt được tải xuống của chúng tôi, chúng tôi sẽ sử dụng một phần tử neo. Phần tử sẽ có URL dữ liệu của chúng tôi được đặt động làm href và thuộc tính tải xuống. Thuộc tính này chỉ định rằng tệp đích sẽ được tải xuống khi người dùng nhấp vào liên kết thay vì điều hướng đến tệp

Newly Generated File

Để tự động đặt href của chúng tôi, chúng tôi sẽ sử dụng sự kiện tải được kích hoạt bởi FileReader, bằng cách khai báo một hàm gọi lại

reader.onload = (e) => {
  const fileDownload = document.getElementById("fileDownload");
  fileDownload.href = e.target.result;
}

Trình soạn thảo văn bản của chúng tôi đang bắt đầu hình thành. Tại thời điểm này, chúng tôi có thể tải xuống tệp văn bản "tĩnh"

Đã đến lúc cung cấp một số quyền kiểm soát cho người dùng của chúng tôi và làm cho mọi thứ năng động hơn. Để thực hiện tác vụ này, chúng tôi sẽ tạo một kiểu nhập văn bản đơn giản, được sử dụng để tự động sửa đổi nội dung tệp của chúng tôi

Mã Javascript sẽ trông như thế này

Đoạn mã trên đã làm cho trình soạn thảo văn bản của chúng ta trở nên sống động. Bây giờ chúng tôi có thể sửa đổi văn bản hoặc tệp đã tải xuống của chúng tôi

Sử dụng FileReader để đọc tệp được tải lên bằng đầu vào của loại tệp

Cuối cùng, để mở rộng kiến ​​thức về API FileReader, chúng tôi sẽ nâng cao trình chỉnh sửa của mình bằng một tính năng khác. Chúng tôi sẽ cung cấp cho người dùng khả năng tải lên tệp văn bản từ máy tính của họ và sửa đổi tệp đó bằng mã được viết ở trên

Để thực hiện điều này, chúng tôi sẽ tạo đầu vào của loại tệp và lắng nghe sự kiện thay đổi được kích hoạt bởi phần tử này để khởi tạo FileReader của chúng tôi (đây là cách sử dụng phổ biến nhất của api trình đọc tệp)

Codepen này bao gồm mã đầy đủ chức năng của chúng tôi. https. // codepen. io/zelig880/pen/XLraXj

Phần kết luận

Thật không thể tin được ngày nay có thể đạt được bao nhiêu với javascript trực tiếp trong trình duyệt

Trong vòng chưa đầy 50 dòng, chúng tôi đã có thể viết một trình soạn thảo văn bản đầy đủ chức năng, nó có thể chưa sẵn sàng để sản xuất (nó có một số lỗi), nhưng ý nghĩ rằng chúng tôi có thể đạt được rất nhiều điều mà chỉ cần rất ít mã đã lấp đầy tôi

TLDR

Có thể tìm thấy mã hoàn chỉnh cho trình soạn thảo văn bản của chúng tôi tại codepen sau. https. // codepen. io/zelig880/pen/XLraXj

Bài đăng này được viết bởi Simone Cuomo, người cố vấn và kỹ sư phần mềm cao cấp tại ThisDot

Bạn có thể theo dõi họ trên Twitter tại @zelig880

Công ty Dot này. là một công ty tư vấn có hai chi nhánh. luồng phương tiện và luồng phòng thí nghiệm. Dot Media này là phần chịu trách nhiệm giúp các nhà phát triển cập nhật những tiến bộ trong nền tảng web. Dot Labs này cung cấp cho các nhóm kiến ​​thức chuyên môn về nền tảng web, sử dụng các phương pháp như cố vấn và đào tạo

JavaScript có thể ghi vào tệp văn bản không?

Làm cách nào để chỉnh sửa văn bản trong JavaScript?

Làm cách nào để chỉnh sửa tệp bằng JavaScript?

bạn có thể chỉnh sửa không. tập tin txt?