📌  相关文章
📜  使用文件系统访问 API 的简单文本编辑器(1)

📅  最后修改于: 2023-12-03 14:49:55.226000             🧑  作者: Mango

使用文件系统访问 API 的简单文本编辑器

在本文中，我们将介绍如何使用文件系统访问 API 来编写一个简单的文本编辑器。这个编辑器不仅可以编辑文本，而且还可以保存和读取文件。

项目结构

我们的项目结构如下所示：

.
├── index.html
├── main.js
└── style.css

index.html 是我们的网页，main.js 是我们的 JavaScript 代码，style.css 是我们的 CSS 样式表。

HTML

我们的 HTML 文件很简单：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Simple Text Editor</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="editor" contenteditable="true"></div>
    <button id="save">Save</button>
    <button id="load">Load</button>
    <script src="main.js"></script>
  </body>
</html>

我们有一个可编辑的 div，它是我们的文本编辑器，还有两个按钮：Save 和 Load。注意，我们给 div 设置了 contenteditable 属性，这样用户就可以在其中输入文本。

CSS

我们的 CSS 非常简单，我们只是把编辑器的大小和字体样式调整了一下：

body {
  font-family: Arial, sans-serif;
}

#editor {
  width: 100%;
  height: 200px;
  border: 1px solid black;
  padding: 10px;
  box-sizing: border-box;
}
JavaScript

我们的 JavaScript 代码是最重要的部分。我们需要处理以下几个方面：

  1. 当用户单击 Save 按钮时，我们需要将编辑器中的内容保存到文件中。
  2. 当用户单击 Load 按钮时，我们需要从文件中读取内容并显示在编辑器中。
  3. 当用户在编辑器中输入文本时，我们需要实时更新保存按钮的状态，以便提示用户是否需要保存当前的更改。

让我们逐步解释这三个方面的实现。

1. 保存文件

我们需要为保存按钮绑定一个单击事件，以便在单击按钮时将编辑器中的内容保存为一个文件。在此之前，我们需要检查编辑器中是否有内容。如果没有内容，则不需要保存文件。

以下是代码：

const saveBtn = document.getElementById('save');

saveBtn.addEventListener('click', () => {
  const content = document.getElementById('editor').innerText;

  if (content) {
    // 使用文件系统访问 API 将内容保存到文件中
    window.showSaveFilePicker().then(fileHandle => {
      writeFile(fileHandle, content);
    });
  }
});

async function writeFile(fileHandle, content) {
  const writable = await fileHandle.createWritable();
  await writable.write(content);
  await writable.close();
}

代码逐行解释如下：

  • 我们首先使用 document.getElementById 获取 save 按钮的引用。
  • 接着，我们为按钮绑定一个 click 事件监听器，当用户单击按钮时，我们需要获取编辑器中的内容。
  • 如果编辑器中有内容，我们将使用文件系统访问 API 中提供的 showSaveFilePicker 方法来弹出保存文件的对话框。这个方法返回一个 Promise 对象，我们将使用 then 方法来获取用户选择的文件句柄。注意，这里我们使用 await 关键字来等待异步操作完成。
  • 当我们获取到用户选择的文件句柄之后，我们就可以使用 createWritable 方法来创建一个可写的流，并使用 write 方法将内容写入文件中。最后，我们使用 close 方法来关闭流。
2. 读取文件

我们为 load 按钮绑定一个单击事件监听器，以便从文件中读取内容并将其显示在编辑器中。

以下是代码：

const loadBtn = document.getElementById('load');

loadBtn.addEventListener('click', () => {
  // 使用文件系统访问 API 选择要读取的文件
  window.showOpenFilePicker().then(fileHandle => {
    readTextFile(fileHandle).then(content => {
      document.getElementById('editor').innerText = content;
    });
  });
});

async function readTextFile(fileHandle) {
  const file = await fileHandle.getFile();
  const content = await file.text();
  return content;
}

代码逐行解释如下：

  • 我们首先使用 document.getElementById 获取 load 按钮的引用。
  • 接着，我们为按钮绑定一个 click 事件监听器，以便从文件中读取内容。
  • 当用户单击按钮时，我们使用文件系统访问 API 中提供的 showOpenFilePicker 方法来弹出选择文件的对话框。这个方法也返回一个 Promise 对象，我们将使用 then 方法来获取用户选择的文件句柄。注意，这里我们使用 await 关键字来等待异步操作完成。
  • 当我们获取到用户选择的文件句柄之后，我们就可以使用 getFile 方法获取文件对象，并使用 text 方法获取文件的文本内容。最后，我们将这个内容设置为编辑器的文本。
3. 实时更新保存按钮状态

最后，当用户在编辑器中输入文本时，我们需要检查编辑器中的内容是否已更改，并使保存按钮的状态相应地进行更改。

以下是代码：

document.getElementById('editor').addEventListener('input', () => {
  const content = document.getElementById('editor').innerText;

  if (content) {
    saveBtn.disabled = false;
  } else {
    saveBtn.disabled = true;
  }
});

代码逐行解释如下：

  • 我们使用 document.getElementById 获取编辑器的引用，并为其绑定一个 input 事件监听器，以便检测编辑器中的内容是否已更改。
  • 每当用户输入新的内容时，我们就获取编辑器中的文本，并检查它是否为空。
  • 如果编辑器中有内容，我们将使保存按钮为可用状态，以便用户可以保存更改。否则，我们将禁用保存按钮。
结论

通过文件系统访问 API，我们可以轻松地编写一个简单的文本编辑器，它不仅可以编辑文本，还可以保存和读取文件。虽然我们示例中的代码可能不是最佳的实现方式，但它可以帮助你理解如何使用文件系统访问 API。

资源