返回列表 发布新帖

html文本代码编辑器(简单、快捷,可内网运行)

375 0
小K网牛逼 发表于 2 小时前 | 查看全部 阅读模式 <

马上注册,结交更多好友,享用更多功能,让你轻松玩转小K网。

您需要 登录 才可以下载或查看,没有账号?立即注册 微信登录

×
html文本代码编辑器(简单、快捷,可内网运行)

html文本代码编辑器(简单、快捷,可内网运行)

html文本代码编辑器(简单、快捷,可内网运行)

html文本代码编辑器(简单、快捷,可内网运行)

html文本代码编辑器(简单、快捷,可内网运行)

html文本代码编辑器(简单、快捷,可内网运行)

html文本代码编辑器(简单、快捷,可内网运行)

html文本代码编辑器(简单、快捷,可内网运行)

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键进入/退出全屏

关键代码

  1. // Tab键处理函数
  2. function handleTabKey(e) {
  3.         // 如果按下的不是Tab键,不处理
  4.         if (e.key !== 'Tab') return;
  5.         e.preventDefault(); // 阻止默认的Tab行为(焦点切换)
  6.         const start = textEditor.selectionStart;
  7.         const end = textEditor.selectionEnd;
  8.         const value = textEditor.value;
  9.         // 获取缩进字符串
  10.         let indentStr;
  11.         if (tabSizeSelect.value === 'tab') {
  12.                 indentStr = '\t'; // 使用制表符
  13.         } else {
  14.                 indentStr = ' '.repeat(parseInt(tabSizeSelect.value)); // 使用空格
  15.         }
  16.         ...
  17. // 处理全屏状态变化
  18. function handleFullscreenChange() {
  19.         const fullscreenElement = document.fullscreenElement ||
  20.                                                          document.mozFullScreenElement ||
  21.                                                          document.webkitFullscreenElement ||
  22.                                                          document.msFullscreenElement;
  23.         isFullscreen = !!fullscreenElement;
  24.         if (isFullscreen) {
  25.                 // 进入全屏模式
  26.                 editorContainer.classList.add('fullscreen');
  27.                 document.body.classList.add('fullscreen-mode');
  28.                 fullscreenBtn.innerHTML = '<i class="fas fa-compress"></i> 退出全屏';
  29.                 fullscreenBtn.style.backgroundColor = '#e74c3c';
  30.                 fullscreenStatus.textContent = '全屏';
  31.                 // 显示提示
  32.                 const originalHTML = fullscreenBtn.innerHTML;
  33.                 fullscreenBtn.innerHTML = '<i class="fas fa-check"></i> 已进入全屏';
  34.                 setTimeout(() => {
  35.                         fullscreenBtn.innerHTML = originalHTML;
  36.                 }, 1500);
  37.                 ...
复制代码

https://xiaok.lanzoum.com/i8p0i3dw8p4b

回复

您需要登录后才可以回帖 登录 | 立即注册 微信登录

本版积分规则

您需要 登录 后才可以回复,轻松玩转社区,没有帐号?立即注册
快速回复
关灯 在本版发帖
扫一扫添加微信客服
QQ客服返回顶部
快速回复 返回顶部 返回列表