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

news2024/9/24 1:21:11

<!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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2105412.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Tauri应用开发实践指南(4)— Tauri 原生能力

本文首发于微信公众号&#xff1a;前端徐徐。欢迎关注&#xff0c;获取更多前端技能分享。 原生能力简介 Tauri 是一个用于构建安全的小型桌面应用程序的框架,它结合了 Web 前端和系统后端技术。Tauri 提供了一些原生能力,让您的 Web 应用程序能够访问本地系统资源和 API,主要…

聚焦新能源未来,望繁信科技邀您共赴CNDS 2024中国新能源产业数智峰会

在全球能源转型的关键时刻&#xff0c;新能源产业正以迅猛的速度向前发展&#xff0c;而数字化技术则为这一产业注入了前所未有的动力。为进一步推动新能源产业与数字化的深度融合&#xff0c;CNDS 2024中国新能源产业数智峰会即将于2024年9月13日在北京盛大举行。作为大数据流…

节日庆典中的白酒文化,传承与创新并存

在中华五千年的文明长河中&#xff0c;白酒文化如同一颗璀璨的明珠&#xff0c;熠熠生辉。它既是历史的见证者&#xff0c;也是文化的传承者。在节日庆典的喜庆氛围中&#xff0c;白酒更是不可或缺的元素&#xff0c;其背后蕴藏着深厚的文化底蕴和时代价值。豪迈白酒&#xff0…

The Llama 3 Herd of Models【论文原文下载】

关注B站可以观看更多实战教学视频&#xff1a;hallo128的个人空间 The Llama 3 Herd of Models【论文原文】 点击下载&#xff1a;原文下载链接 摘要 现代人工智能&#xff08;AI&#xff09;系统由基础模型驱动。本文介绍了一组新的基础模型&#xff0c;称为 Llama 3。它是…

Anaconda最新安装教程

1 概述 1 介绍 Anaconda是一个专注于数据分析的Python发行版本&#xff0c;它为科学计算和数据科学领域提供了强大的支持。Anaconda是一个开源的Python发行版&#xff0c;包含了conda、Python以及超过190个科学包及其依赖项。这些包涵盖了数据分析、机器学习、深度学习等多个…

突破视觉理解极限,Qwen2-VL重磅登场

前沿科技速递&#x1f680; 经过近一年的持续努力&#xff0c;Qwen团队宣布推出最新一代的视觉语言模型&#xff1a;Qwen2-VL。基于Qwen2的基础&#xff0c;Qwen2-VL在多个方面实现了显著提升&#xff0c;相较于前代模型Qwen-VL&#xff0c;它具备以下核心优势&#xff1a; 1. …

24/9/3算法笔记 kaggle泰坦尼克

题目&#xff1a; 这次我用两种算法做了这道题 逻辑回归二分类算法 import pandas as pd from sklearn.model_selection import train_test_split from sklearn.preprocessing import StandardScaler from sklearn.linear_model import LogisticRegression from sklearn.metr…

信息打点day.06

一、知识点 1、黑盒测试 黑盒测试是一种评估网络安全性的方法&#xff0c;它模拟了攻击者在不了解系统内部结构和工作机制的情况下&#xff0c;仅通过外部接口&#xff08;如网络协议、应用程序界面等&#xff09;尝试渗透、攻击或绕过安全控制的行为。通过模拟真实的攻击场景…

心觉:如何填平想象和愿望之间的鸿沟?

愿望是什么&#xff1f; 你想变得富有 你想减掉20斤 你想拥有自己的Dream Car 你想拥有S型身材 这些都是愿望&#xff0c;非常美好的想法或者目标 想象是什么&#xff1f; 我能变得富有吗&#xff0c;我啥也不会&#xff0c;除了上班&#xff0c;就是上班 我怎么可能减肥…

多少次幂的计算器,指数计算器

https://miniwebtool.com/zh-cn/exponents-calculator/?n10.95&n2100&prec10

智慧平台赋能政务管理,声通科技助力政务管理智能化

在智能时代的大潮中&#xff0c;政务管理也在不断寻求创新与突破&#xff0c;在这方面&#xff0c;涌现出了很多优秀的公司。比如声通科技的子公司西安金讯数智信息技术有限公司&#xff0c;就在AI政务热线领域有很多创新成果&#xff0c;为政务管理的智能化升级提供了新思路。…

一文教你学会java代码审计

《网安面试指南》http://mp.weixin.qq.com/s?__bizMzkwNjY1Mzc0Nw&mid2247484339&idx1&sn356300f169de74e7a778b04bfbbbd0ab&chksmc0e47aeff793f3f9a5f7abcfa57695e8944e52bca2de2c7a3eb1aecb3c1e6b9cb6abe509d51f&scene21#wechat_redirect 《Java代码审…

如何借助前端表格控件实现债券网下发行数字化?

最新技术资源&#xff08;建议收藏&#xff09; https://www.grapecity.com.cn/resources/ 概要 作为金融市场中至关重要的一环&#xff0c;债券行业扮演着融资、投资、风险管理等多重角色&#xff0c;对经济的发展和稳定起着举足轻重的作用。随着证券行业全面实施注册制的推进…

硬件工程师笔试面试——上拉电阻、下拉电阻

目录 1.3、上拉电阻 原理图 1.3.1、定义 1.3.2、作用 1.3.3、工作原理 1.3.4、选择上拉电阻的值 1.3.5、应用场景 1.3.6、与下拉电阻的区别 1.3.7、设计考虑 1.3.8电路设计中的注意事项 1.3.9、与ESD保护的结合 1.3.10、实际应用 1.3.11、上拉电阻在不同电压等级的…

如何提升网站的收录率?

要提升网站的收录率&#xff0c;其中一个特别有效的工具就是GPC爬虫池&#xff0c;这个工具通过深度研究谷歌SEO算法&#xff0c;吸引谷歌爬虫。 GPC爬虫池的基本原理是构建一个庞大的站群系统&#xff0c;并创建复杂的内链和外链结构&#xff0c;以吸引并留住谷歌蜘蛛 使用GP…

BF算法Java

BF算法 代码实现运行结果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/91e0700ed8144fcc87e8f8d222c0e0b8.png) BF算法又称暴力算法&#xff0c;运算过程相对较慢&#xff0c;但是也是基础的算法&#xff0c;这里我们可以给两个字符串&#xff0c;arr1 arr2 由arr1…

Nvidia扩展AI帝国:从芯片到数据中心设计的全面布局

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

HarmonyOS开发实战( Beta5.0)自定义组件冻结功能规范

自定义组件处于非激活状态时&#xff0c;状态变量将不响应更新&#xff0c;即Watch不会调用&#xff0c;状态变量关联的节点不会刷新。通过freezeWhenInactive属性来决定是否使用冻结功能&#xff0c;不传参数时默认不使用。支持的场景有&#xff1a;页面路由&#xff0c;TabCo…

移动UI:成就勋章页面该如何设计,用例子说明。

移动应用的UI成就勋章页面通常是一个展示用户在应用中取得成就和获得勋章的页面。这种页面通常用于激励用户参与应用的活动&#xff0c;增加用户的参与度和忠诚度。 UI设计成就勋章页面时&#xff0c;一般会包括以下元素和功能&#xff1a; 1. 勋章列表&#xff1a; 展示用户…

[SWPUCTF 2022 新生赛]android2-快坚持不下去的第四天

找main函数&#xff0c;MainActivity类名 棿棢棢棲棥棷棊棐棁棚棨棨棵棢棌加密函数 加密过程&#xff0c;key123456789 密文和this.key异或 key为987654321 # 已知信息 enc "棿棢棢棲棥棷棊棐棁棚棨棨棵棢棌" key 987654321# 限制 key 到 16 位范围 masked_key…