| 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键进入/退出全屏
关键代码
- function handleTabKey(e) {
-
- if (e.key !== ‘Tab’) return;
-
- e.preventDefault();
-
- 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);
- …
复制代码
|
