修改数据器-CSDN博客

本文链接：https://blog.csdn.net/lulei5153/article/details/141571938
<!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>