专属看板娘

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

素颜
2025-12-18 / 4 评论 / 26 阅读 / 耗时: 104 ms / 正在检测是否收录...
温馨提示:
本文最后更新于2025年12月18日,已超过25天没有更新,若内容或图片失效,请留言反馈。
广告

mjagmngo.png
mjagmq1n.png
功能说明
行号显示:左侧实时显示行号,并与编辑器内容同步滚动
文件打开:点击"打开文件"按钮选择本地文件,或支持拖放文件到编辑器打开
支持.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);
                ...

本文共 318 个字数,平均阅读时长 ≈ 1分钟
广告
0

打赏

海报

正在生成.....

评论 (4)

语录
取消
  1. 头像
    6 Lv.1
    ·Android · QQ Browser
    沙发

    这种事,害羞你就输了,热情冷却什么,还是等变成爷爷奶奶了再说吧

    回复 删除 垃圾
  2. 头像
    小七爸爸 Lv.3
    ·Android · Google Chrome
    板凳

    有时候,你问的问题,对方一直在闪躲,那就是委婉的告诉你,真实的回答很残忍

    回复 删除 垃圾
  3. 头像
    我相信 Lv.5
    ·Android · Google Chrome
    地毯

    人生就是一列开往坟墓的列车,路途上会有很多站,很难有人可以自始至终陪着走完。当陪你的人要下车时,即使不舍也该心存感激,然后挥手道别。

    回复 删除 垃圾
  4. 头像
    2697932763@qq.co Lv.2
    ·Windows 10 · Google Chrome
    第4楼

    就算再不起眼肯定也会遇到好事的

    回复 删除 垃圾