完整的HTML自适应在线代码编辑器实现，支持多语言编辑和实时预览

原创已于 2025-08-26 10:57:25 修改 · 411 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#html #编辑器 #前端

于 2025-08-26 00:15:53 首次发布

代码教程专栏收录该内容

13 篇文章

订阅专栏

完整功能：支持HTML/CSS/JS三语言编辑与实时预览
现代化UI：采用渐变色背景、毛玻璃效果和流畅动画
专业编辑：集成ACE编辑器，支持语法高亮和自动补全
响应式设计：适配不同屏幕尺寸的设备
模块化架构：HTML/CSS/JS分离，便于维护扩展

该代码编辑器包含标签页切换、主题选择、字体大小调整等功能，所有操作均在浏览器本地完成。通过ACE编辑器实现专业级的代码编辑体验，支持语法高亮、自动补全等特性。UI设计采用现代化风格，包含渐变色背景和流畅的交互动画。

以下是完整的在线代码编辑器实现，支持多语言编辑和实时预览：

荻酷云端代码实验室自适应PC演示效果


<!DOCTYPE html>
<html lang="zh-CN">
    <!--荻酷云端代码实验室版权所有 请保留-->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>荻酷云端代码实验室</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body class="bg-gradient-to-br from-gray-900 to-gray-800 min-h-screen text-gray-100">
    <div class="container mx-auto px-4 py-8">
        <header class="mb-8">
            <h1 class="text-3xl font-bold text-purple-400 flex items-center">
                <i class="fas fa-code mr-3"></i>荻酷云端代码实验室
            </h1>
            <p class="text-gray-400 mt-2">实时编辑HTML/CSS/JavaScript代码并查看结果</p>
        </header>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
            <div class="bg-gray-800 rounded-xl shadow-xl overflow-hidden">
                <div class="flex bg-gray-700 px-4 py-2">
                    <div class="flex space-x-2">
                        <button class="editor-tab active" data-lang="html"><i class="fab fa-html5 mr-2 text-orange-500"></i>HTML</button>
                        <button class="editor-tab" data-lang="css"> <i class="fab fa-css3-alt mr-2 text-blue-400"></i>CSS</button>
                        <button class="editor-tab" data-lang="js"><i class="fab fa-js-square mr-2 text-yellow-300"></i>JavaScript</button>
                    </div>
                    <button id="run-btn" class="ml-auto bg-purple-600 hover:bg-purple-700 px-4 py-1 rounded-md text-sm">
                        <i class="fas fa-play mr-1"></i>运行
                    </button>
                </div>
                <div id="html-editor" class="editor-container"></div>
                <div id="css-editor" class="editor-container hidden"></div>
                <div id="js-editor" class="editor-container hidden"></div>
            </div>

            <div class="bg-gray-800 rounded-xl shadow-xl overflow-hidden">
                <div class="bg-gray-700 px-4 py-2">
                    <h3 class="font-medium"><i class="fas fa-eye mr-2"></i>实时预览</h3>
                </div>
                <iframe id="output-frame" class="output-frame w-full"></iframe>
            </div>
        </div>

        <div class="flex justify-between items-center text-sm text-gray-500">
            <div class="flex items-center space-x-4">
                <button id="theme-btn" class="hover:text-purple-400">
                    <i class="fas fa-moon mr-1"></i>切换主题
                </button>
                <button id="font-inc" class="hover:text-purple-400">
                    <i class="fas fa-text-height mr-1"></i>增大字体
                </button>
                <button id="font-dec" class="hover:text-purple-400">
                    <i class="fas fa-text-width mr-1"></i>减小字体
                </button>
            </div>
            <div>
                <span id="status" class="text-green-400"><i class="fas fa-check-circle mr-1"></i>就绪</span>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.15.2/ace.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.15.2/ext-language_tools.js"></script>
    <script src="app.js"></script>
</body>
</html>

CSS代码：


.editor-container {
    height: 400px;
    border-radius: 0 0 0.75rem 0.75rem;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.output-frame {
    height: 400px;
    background: #ffa999;/*实时预览界面颜色**/
    border-radius: 0 0 0.75rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.editor-tab {
    @apply px-3 py-1 text-sm rounded-md;
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.2s ease;
}

.editor-tab.active {
    @apply bg-gray-600;
    color: white;
}

.editor-tab:hover:not(.active) {
    @apply bg-gray-600;
    color: white;
}

#run-btn {
    transition: all 0.2s ease;
}

/* 动画效果 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 0.3s ease-in;
}

JS代码：


document.addEventListener('DOMContentLoaded', () => {
    // 初始化编辑器
    const editors = {};
    const languages = ['html', 'css', 'js'];
    let currentFontSize = 16;
    let currentTheme = 'twilight';

    // 初始化ACE编辑器
    languages.forEach(lang => {
        editors[lang] = ace.edit(`${lang}-editor`);
        editors[lang].setTheme(`ace/theme/${currentTheme}`);
        editors[lang].session.setMode(`ace/mode/${lang}`);
        editors[lang].setFontSize(currentFontSize);
        editors[lang].setOptions({
            enableBasicAutocompletion: true,
            enableLiveAutocompletion: true,
            showLineNumbers: true,
            showGutter: true,
            showPrintMargin: false
        });
        
        // 设置默认代码
        if(lang === 'html') {
            editors[lang].setValue(`<!DOCTYPE html>
<html>
<head>
    <title>我的页面</title>
    <style>\n\n</style>
</head>
<body>
    <h1>欢迎来到荻酷代码实验室</h1>
    <p>编辑左侧CSS/JS代码，点击运行查看结果</p>
     <p>完整功能：支持HTML/CSS/JS三语言编辑与实时预览，包含代码自动补全和语法高亮</p>
 <p>现代化UI：采用渐变色背景、卡片式布局和流畅的交互动画</p>
 <p>交互体验：提供标签页切换、主题切换、字体大小调整等个性化设置</p>
 <p>实时反馈：自动运行功能(防抖处理)和状态提示系统</p>
 <p>代码质量：模块化JavaScript架构，完善的错误处理和性能优化</p>
 <p>该编辑器使用ACE编辑器提供专业级的代码编辑体验，所有操作均在浏览器本地完成，无需服务器支持。UI设计采用暗色主题和现代化视觉效果，确保长时间编码的舒适度。</p>
    <script>\n\n</script>
</body>
</html>`);
        }
    });
     //CNDKK荻酷云端代码实验室版权所有 请保留
    // 标签页切换
    document.querySelectorAll('.editor-tab').forEach(tab => {
        tab.addEventListener('click', () => {
            const lang = tab.dataset.lang;
            document.querySelectorAll('.editor-container').forEach(container => {
                container.classList.add('hidden');
            });
            document.getElementById(`${lang}-editor`).classList.remove('hidden');
            
            document.querySelectorAll('.editor-tab').forEach(t => {
                t.classList.remove('active');
            });
            tab.classList.add('active');
        });
    });

    // 运行代码
    document.getElementById('run-btn').addEventListener('click', runCode);
    
    // 主题切换
    document.getElementById('theme-btn').addEventListener('click', () => {
        const themes = ['twilight', 'chrome', 'dracula', 'monokai'];
        const currentIndex = themes.indexOf(currentTheme);
        const nextIndex = (currentIndex + 1) % themes.length;
        currentTheme = themes[nextIndex];
        
        languages.forEach(lang => {
            editors[lang].setTheme(`ace/theme/${currentTheme}`);
        });
        
        updateStatus(`主题已切换: ${currentTheme}`);
    });

    // 字体大小调整
    document.getElementById('font-inc').addEventListener('click', () => {
        if(currentFontSize < 24) {
            currentFontSize += 1;
            updateFontSize();
        }
    });
    
    document.getElementById('font-dec').addEventListener('click', () => {
        if(currentFontSize > 12) {
            currentFontSize -= 1;
            updateFontSize();
        }
    });

    // 自动运行（防抖）
    let debounceTimer;
    languages.forEach(lang => {
        editors[lang].on('change', () => {
            clearTimeout(debounceTimer);
            debounceTimer = setTimeout(() => {
                runCode();
            }, 1000);
        });
    });

    // 辅助函数
    function updateFontSize() {
        languages.forEach(lang => {
            editors[lang].setFontSize(currentFontSize);
        });
        updateStatus(`字体大小: ${currentFontSize}px`);
    }
    
    function updateStatus(message) {
        const statusEl = document.getElementById('status');
        statusEl.textContent = message;
        statusEl.classList.add('fade-in');
        setTimeout(() => {
            statusEl.classList.remove('fade-in');
        }, 3000);
    }
    
    function runCode() {
        try {
            const html = editors['html'].getValue();
            const css = editors['css'].getValue();
            const js = editors['js'].getValue();
            
            const output = document.getElementById('output-frame').contentDocument;
            output.open();
            output.write(`
                <!DOCTYPE html>
                <html>
                <head>
                    <style>${css}</style>
                </head>
                <body>
                    ${html}
                    <script>${js}</script>
                </body>
                </html>
            `);
            output.close();
            
            updateStatus('代码执行成功');
        } catch (error) {
            updateStatus(`错误: ${error.message}`);
            console.error(error);
        }
    }
    
    // 初始运行
    runCode();
});