网页版修改本地数据器：重新布局，引入 highlight.js高亮显示代码

与妖为邻
于 2024-09-04 22:14:45 发布
阅读量124
点赞数 4
文章标签： javascript 开发语言 ecmascript
本文链接：https://blog.csdn.net/lulei5153/article/details/141905669
版权
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>修改数据器</title>
    <!-- 引入 highlight.js 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">
</head>
<style>
    /* 修改数据器按钮 */
    #readFolder {
        color: #67c23a;
        text-shadow: 1px 1px 1px #070707;
        cursor: pointer;
    }

    /* 修改数据器样式  开始*/
    #addReadFolderArea {
        margin-left: 10px;

        #addReadFolder {
            display: flex;

            /* 保存按钮 */
            #fileSave {
                color: #e6a23c;
            }

            /* 关闭按钮 */
            .cancel-button {
                color: #f56c6c;
            }
        }

        /* 修改内容区 */
        #fileContent {
            white-space: pre-wrap;
            border: 1px solid #ccc;
            padding: 5px;
            height: 865px;
            overflow: auto;
            /* 添加此行 */
        }
    }

    /* 修改数据器样式  结束*/
</style>

<body>
    <!-- 修改数据器按钮 -->
    <button type="button" id="readFolder" onclick="addReadFolderArea.show()">修改数据器</button>
    <!-- 修改内容区 -->
    <dialog id="addReadFolderArea"></dialog>
    <script>
        function initializeFileEditor() {
            // 初始化对话框内容
            document.getElementById('addReadFolderArea').innerHTML = `
            <div id="addReadFolder">
                <form id="buttonContainer">
                    <div id="fileTree"></div>
                    <button type="button" id="fileSave">保存</button>
                    <button type="submit"  class="cancel-button">关闭</button>                
                </form>
                <div id="fileContent" contenteditable="true" name="textarea1"></div>
            </div>
            `;
            // 简陋的编辑器功能
            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();
                                    // 使用 highlight.js 高亮显示代码
                                    hljs.highlightElement(fileContent);
                                });
                                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('操作失败，请重试。');
                }
            });
            // 同时按下Ctrl键和's'键保存
            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('保存失败，请重试。');
                }
            });
        }
        // 初始化文件编辑器
        initializeFileEditor();
    </script>
    <!-- 引入 highlight.js 的 JavaScript 文件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
</body>

</html>