![](https://i-blog.csdnimg.cn/direct/55e705b79b03441b9a5eee4238ec50c9.gif)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>修改数据器</title>
</head>
<style>
/* 修改数据器样式 */
#readFolder {
/* 修改数据器按钮字体 */
font-size: 1.5rem;
color: #e6a23c;
cursor: pointer;
}
#addReadFolder {
margin-top: 10px;
margin-left: 10px;
button {
color: #fe0404;
cursor: pointer;
}
#buttonContainer {
/* 关闭按钮的 */
position: fixed;
transform: translate(855%, 25%);
button {
font-size: 1.2rem;
}
}
/* 保存按钮样式: */
#fileSave {
transform: translate(960%, 25%);
position: fixed;
color: #ffd500;
text-shadow: 1px 1px 1px #000;
font-size: 1.2rem;
}
#fileContent {
white-space: pre-wrap;
overflow-y: auto;
border: 1px solid #ccc;
padding: 5px;
}
}
/* 修改数据器样式 结束*/
</style>
<body>
<button type="button" id="readFolder" onclick="addReadFolder.show()">修改数据器</button>
<div id="addReadFolderArea"></div>
</body>
<script>
/*修改数据器*/
// 创建 <dialog> 元素
const dialog = document.createElement('dialog');
dialog.id = 'addReadFolder';
// 创建包含关闭和保存按钮的 <div> 元素
const buttonContainer = document.createElement('div');
buttonContainer.id = 'buttonContainer';
// 创建 <button> 元素
const button = document.createElement('button');
button.type = 'button';
button.id = 'fileSave';
button.textContent = '保存';
// 创建关闭按钮
const closeButton = document.createElement('button');
closeButton.type = 'button';
closeButton.textContent = '关闭';
closeButton.onclick = function () {
dialog.close();
};
// 将关闭按钮和保存按钮添加到 <div> 中
buttonContainer.appendChild(button);
buttonContainer.appendChild(closeButton);
// 将 <div> 添加到 dialog 中
dialog.appendChild(buttonContainer);
// 创建第一个 <div> 元素
const div1 = document.createElement('div');
// 创建第二个 <div> 元素,id 为 fileTree
const divFileTree = document.createElement('div');
divFileTree.id = 'fileTree';
// 创建第三个 <div> 元素,id 为 fileContent,并设置 contenteditable 属性
const divFileContent = document.createElement('div');
divFileContent.id = 'fileContent';
divFileContent.contentEditable = 'true';
divFileContent.name = 'textarea1';
// 将 <button> 和两个 <div> 元素添加到第一个 <div> 中
div1.appendChild(divFileTree);
div1.appendChild(divFileContent);
// 将 <button> 和第一个 <div> 添加到 <dialog> 中
dialog.appendChild(button);
dialog.appendChild(div1);
// 将 <dialog> 元素添加到文档的 addReadFolderArea 中
let addReadFolderArea = document.getElementById('addReadFolderArea');
addReadFolderArea.appendChild(dialog);
// 显示 <dialog> 元素
window.addReadFolder = {
show: function () {
dialog.showModal();
}
};
// 简陋的编辑器功能
let currentFileHandle = null; // 变量用于存储当前文件句柄
document.getElementById('readFolder').addEventListener('click', async () => {
try {
const directoryHandle = await window.showDirectoryPicker();
const fileTree = document.getElementById('fileTree');
const fileContent = document.getElementById('fileContent');
fileTree.innerHTML = ''; // 清空文件树内容
fileContent.innerHTML = ''; // 清空文件内容区域
async function readDirectory(directoryHandle, parentElement) {
const ul = document.createElement('ul');
parentElement.appendChild(ul);
for await (const entry of directoryHandle.values()) {
const li = document.createElement('li');
const entryName = document.createElement('span');
entryName.textContent = entry.name;
li.appendChild(entryName);
ul.appendChild(li);
if (entry.kind === 'directory') {
entryName.textContent = `[文件夹] ${entry.name}`;
li.addEventListener('click', async (e) => {
e.stopPropagation();
if (li.classList.contains('open')) {
li.classList.remove('open');
li.querySelector('ul').remove();
} else {
li.classList.add('open');
await readDirectory(entry, li);
}
});
} else if (entry.kind === 'file') {
li.addEventListener('click', async (e) => {
e.stopPropagation();
currentFileHandle = entry;
const file = await entry.getFile();
fileContent.style.display = 'block';
fileContent.textContent = await file.text();
});
const deleteButton = document.createElement('button');
deleteButton.textContent = '删除';
deleteButton.classList.add('delete-button');
deleteButton.addEventListener('click', async (e) => {
e.stopPropagation();
if (confirm(`确定删除 ${entry.name}?`)) {
await directoryHandle.removeEntry(entry.name);
li.remove();
fileContent.innerHTML = '';
alert('文件删除成功!');
}
});
entryName.appendChild(deleteButton);
}
}
}
await readDirectory(directoryHandle, fileTree);
} catch (error) {
console.error('操作失败:', error);
alert('操作失败,请重试。');
}
});
document.addEventListener('keydown', async (event) => {
if (event.ctrlKey && event.key === 's') {
event.preventDefault();
try {
if (currentFileHandle) {
const writable = await currentFileHandle.createWritable();
await writable.write(document.getElementById('fileContent').textContent);
await writable.close();
alert('文件保存成功!');
}
} catch (error) {
console.error('保存失败:', error);
alert('保存失败,请重试。');
}
}
});
// 为id="fileSave"的按钮添加保存功能
document.getElementById('fileSave').addEventListener('click', async () => {
try {
if (currentFileHandle) {
const writable = await currentFileHandle.createWritable();
await writable.write(document.getElementById('fileContent').textContent);
await writable.close();
alert('文件保存成功!');
} else {
alert('请先选择一个文件进行编辑。');
}
} catch (error) {
console.error('保存失败:', error);
alert('保存失败,请重试。');
}
});
/*修改数据器 结束*/
</script>
</html>