如何在textarea上方创建带HTML/Preview切换功能的工具栏

需要在textarea上方创建工具栏，包含切换按钮：点击按钮时，文字在「HTML」和「Preview」之间切换，同时切换textarea编辑模式与HTML预览模式的显示状态。

完整实现代码 #

<style>
.container {
    width: 500px;
    position: fixed;
}

.toolbar {
    padding: 4px 8px;
    background: #f1f1f1;
    border: 1px solid #ccc;
    border-bottom: none;
    display: flex;
    justify-content: flex-end;
}

.toggle-btn {
    background: red;
    color: white;
    border: none;
    padding: 4px 12px;
    cursor: pointer;
}

#w3review, .preview-area {
    width: 100%;
    height: 200px;
    resize: none;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

.preview-area {
    padding: 8px;
    display: none;
}
</style>

<div class="container">
    <div class="toolbar">
        <button class="toggle-btn" id="toggleBtn">Preview</button>
    </div>
    <textarea id="w3review" name="w3review">&lt;h3&gt;At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.&lt;/h3&gt;</textarea>
    <div class="preview-area" id="previewArea"></div>
</div>

<script>
const toggleBtn = document.getElementById('toggleBtn');
const textarea = document.getElementById('w3review');
const previewArea = document.getElementById('previewArea');

toggleBtn.addEventListener('click', function() {
    // 切换按钮文字
    if (this.textContent === 'Preview') {
        this.textContent = 'HTML';
        // 隐藏textarea，渲染并显示预览区
        textarea.style.display = 'none';
        previewArea.style.display = 'block';
        previewArea.innerHTML = textarea.value;
    } else {
        this.textContent = 'Preview';
        // 显示textarea，隐藏预览区
        textarea.style.display = 'block';
        previewArea.style.display = 'none';
    }
});
</script>

实现说明 #

• 新增.toolbar容器承载切换按钮，优化布局连贯性
• 添加.preview-area用于展示HTML渲染效果，初始默认隐藏
• 点击交互逻辑：
  • 按钮文本在「HTML」和「Preview」间切换
  • 同步切换textarea编辑区与预览区的显示状态
  • 切换到预览模式时，自动将textarea内的HTML内容渲染到预览区域

内容的提问来源于stack exchange，提问作者Code Guy