

功能说明
行号显示:左侧实时显示行号,并与编辑器内容同步滚动
文件打开:点击 ” 打开文件 ” 按钮选择本地文件,或支持拖放文件到编辑器打开
支持。txt、.html、.js、.css、.json、.md 等格式
文件保存:点击 ” 保存文件 ” 将当前内容保存到本地
其他功能:
暗色 / 亮色模式切换
清空编辑器内容
实时统计字数和行数
语法高亮功能
使用了 highlight.js 库提供语法高亮
支持多种编程语言:HTML、CSS、JavaScript、Python、Java、C++、PHP、JSON、XML、SQL、YAML、Markdown 等
可以通过工具栏下拉菜单选择语言
打开文件时会根据文件扩展名自动检测语言
代码注释功能
使用 Ctrl+/ 组合键注释 / 取消注释代码
支持全屏:在工具栏右侧添加了全屏按钮
全屏样式:为全屏模式添加了专门的 CSS 样式
F11 快捷键:支持代码编辑区域按 F11 键进入 / 退出全屏
关键代码
// Tab 键处理函数 function handleTabKey(e) {// 如果按下的不是 Tab 键,不处理 if (e.key !== 'Tab') return; e.preventDefault(); // 阻止默认的 Tab 行为(焦点切换)const start = textEditor.selectionStart; const end = textEditor.selectionEnd; const value = textEditor.value; // 获取缩进字符串 let indentStr; if (tabSizeSelect.value === 'tab') {indentStr = 't'; // 使用制表符} else {indentStr = ''.repeat(parseInt(tabSizeSelect.value)); // 使用空格 } …… // 处理全屏状态变化 function handleFullscreenChange() { const fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement; isFullscreen = !!fullscreenElement; if (isFullscreen) {// 进入全屏模式 editorContainer.classList.add('fullscreen'); document.body.classList.add('fullscreen-mode'); fullscreenBtn.innerHTML =' 退出全屏 '; fullscreenBtn.style.backgroundColor ='#e74c3c'; fullscreenStatus.textContent =' 全屏 '; // 显示提示 const originalHTML = fullscreenBtn.innerHTML; fullscreenBtn.innerHTML =' 已进入全屏 '; setTimeout(() => {fullscreenBtn.innerHTML = originalHTML;}, 1500); ……