html在线编辑器网页

发布时间：2024-12-02 08:56:41 点击量：277

创建一个功能齐全的HTML在线编辑器网页需要考虑多种功能和特性，比如语法高亮显示、实时预览、代码自动补全等。下面是一个简单的HTML在线编辑器的例子，包含基本的代码编辑和实时预览功能。虽然这段代码不足1000字，但你可以在此基础上扩展和增强功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML在线编辑器</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            margin: 0;
            height: 100vh;
        }
        #editor-container {
            display: flex;
            flex: 1;
            border-bottom: 2px solid #ccc;
        }
        #editor, #preview {
            width: 50%;
            padding: 10px;
            overflow-y: auto;
        }
        #editor {
            border-right: 1px solid #ccc;
        }
        textarea {
            width: *;
            height: *;
            border: none;
            resize: none;
            outline: none;
            font-family: monospace;
            font-size: 16px;
        }
        #tool-bar {
            padding: 10px;
            background: #f4f4f4;
            text-align: right;
            border-bottom: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div id="tool-bar">
        <button onclick="runCode()">运行代码</button>
    </div>
    <div id="editor-container">
        <div id="editor">
            <textarea id="code" placeholder="在此处输入HTML代码..."></textarea>
        </div>
        <div id="preview"></div>
    </div>

    <script>
        const runCode = () => {
            const htmlContent = document.getElementById('code').value;
            const previewFrame = document.getElementById('preview');
            previewFrame.innerHTML = htmlContent;
        }

        document.getElementById('code').addEventListener('input', runCode);
    </script>
</body>
</html>

说明：

结构：页面分为两个主要部分：一个编辑区和一个预览区。编辑区使用<textarea>来接收HTML代码，预览区通过innerHTML动态展示代码生成的页面。
样式：使用CSS进行简单的页面布局和样式设定，确保编辑器和预览区各占一半的宽度，并且具有各自的滚动条，以便于查看长内容。
功能：通过JavaScript监听<textarea>中的输入事件，每次代码更改时自动更新预览区域。