html文本代码编辑器(简单、快捷,可内网运行)![]() ![]() 功能说明 行号显示:左侧实时显示行号,并与编辑器内容同步滚动 文件打开:点击"打开文件"按钮选择本地文件,或支持拖放文件到编辑器打开 支持.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 = '<i class="fas fa-compress"></i> 退出全屏';
fullscreenBtn.style.backgroundColor = '#e74c3c';
fullscreenStatus.textContent = '全屏';
// 显示提示
const originalHTML = fullscreenBtn.innerHTML;
fullscreenBtn.innerHTML = '<i class="fas fa-check"></i> 已进入全屏';
setTimeout(() => {
fullscreenBtn.innerHTML = originalHTML;
}, 1500);
... 




久爱网络1 个月前
榜上无名不一定脚下无路.