轻量级内网HTML文本代码编辑器:高效、多功能

作者头像
首页 🏬H5源码 正文

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

7bc4bbe95d781327db20354528f10ec3_232251i60cctjtjg4lmcic.webp

bc0d1d334bce910f5223146aaa6b2138_232314ilooeof5xthx7tu5.webp功能说明
行号显示:左侧实时显示行号,并与编辑器内容同步滚动
文件打开:点击"打开文件"按钮选择本地文件,或支持拖放文件到编辑器打开
支持.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. 本网站的文章内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ:304906607进行删除处理。
  2. 文章采用: 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)。
  3. 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
  4. 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
  5. 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
  6. 本站永久网址:https://www.aybk.cn
全方位DNS切换助手1.2.25 增强自定义功能
« 上一篇 12-18
解锁版爱壁纸-高清壁纸与个性铃声的完美融合
下一篇 » 12-17

发表评论

请先登录后才能发表评论

没有更多评论了

个人信息

HI好朋友 ! 请登录
开通会员,享受下载全站资源特权。
百度一下

随便看看

大家都在看

2025年 乙巳年 蛇年
13 : 36 : 00
公历日期
9月26日
>
星期
星期五
下午好
金秋时节,愿您收获满满
距离国庆节还有5天
登陆
还没有账号?立即注册
点击按钮进行验证
忘记密码?
登陆
忘记密码
已经有账号?马上登陆
获取验证码
重新获取(60s)
点击按钮进行验证
重置密码
注册
已经有账号?马上登陆
获取验证码
重新获取(60s)
点击按钮进行验证
立即注册