黑色主题在线HTML文本编辑器实现一键复制粘贴清空及字体粗体控制

好的，我将为你构建一个**完整、可直接运行**的在线文字编辑网页。它采用**黑色的编辑框**，并集成了您要求的一键复制、粘贴、清空、字体选择（粗体/楷体）以及字体加粗功能。以下是完整的 HTML 代码，您可以直接将其保存为 `.html` 文件并在浏览器中打开使用。 --- ## 🚀 功能特性 - **🖤 黑色主题编辑框**：视觉友好，专注文字本身。 - **📋 一键操作按钮**： - **复制**：复制编辑框内全部内容到剪贴板。 - **粘贴**：从剪贴板粘贴内容到编辑框（需用户授权）。 - **清空**：一键清空编辑框所有内容。 - **🎨 字体与样式控制**： - **字体选择**：默认为 **等线**，支持切换为 **黑体** 和 **楷体**。 - **粗体开关**：点击可切换文字的**加粗**效果。 - **🔧 纯前端实现**：无需后端服务器，完全在浏览器中运行。 --- ## 📄 完整代码 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>黑色在线编辑器</title> <style> /* 全局基础样式 */ * { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: #1e1e1e; color: #ffffff; font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; } .container { width: 90%; max-width: 800px; padding: 30px; border-radius: 12px; background: #2c2c2c; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); } h1 { text-align: center; margin-bottom: 20px; font-weight: 300; letter-spacing: 2px; color: #e0e0e0; } /* 黑色编辑框 */ .editor-box { background-color: #0d0d0d; /* 纯黑 */ border: 1px solid #444; border-radius: 8px; padding: 0; margin-bottom: 16px; overflow: hidden; } textarea { width: 100%; min-height: 300px; padding: 20px; background: transparent; color: #e0e0e0; border: none; outline: none; resize: vertical; font-size: 18px; line-height: 1.6; font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif; } /* 控制面板：按钮和字体选项 */ .controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; margin-bottom: 16px; } .btn-group { display: flex; gap: 8px; flex-wrap: wrap; } button { background: #3a3a3a; border: 1px solid #555; color: #f0f0f0; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-size: 15px; transition: all 0.2s ease; min-width: 80px; } button:hover { background: #4a6fa5; border-color: #5a8bcf; color: white; } button:active { transform: scale(0.95); } .font-selector { display: flex; align-items: center; gap: 8px; background: #333; padding: 6px 14px; border-radius: 6px; } .font-selector label { color: #ccc; font-size: 14px; } .font-selector select { background: #0d0d0d; color: #e0e0e0; border: 1px solid #555; padding: 6px 10px; border-radius: 4px; font-size: 15px; cursor: pointer; } .bold-toggle { display: flex; align-items: center; gap: 8px; } .bold-toggle input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: #4a6fa5; } .bold-toggle label { color: #ccc; font-size: 15px; cursor: pointer; } /* 底部提示 */ .footer-note { text-align: center; font-size: 13px; color: #777; margin-top: 10px; } /* 响应式 */ @media (max-width: 500px) { .controls { flex-direction: column; align-items: stretch; } .btn-group { justify-content: center; } } </style> </head> <body> <div class="container"> <h1>⚫ 在线文字编辑器</h1>  <div class="editor-box"> <textarea id="editor" placeholder="在这里输入文字……"></textarea> </div>  <div class="controls">  <div class="btn-group"> <button id="copyBtn" title="复制全部内容到剪贴板">📋 复制</button> <button id="pasteBtn" title="从剪贴板粘贴内容">📥 粘贴</button> <button id="clearBtn" title="清空编辑器内容">🗑️ 清空</button> </div>  <div class="font-selector"> <label for="fontSelect">字体:</label> <select id="fontSelect"> <option value="'Microsoft YaHei', 'Segoe UI', sans-serif">系统默认</option> <option value="'黑体', 'SimHei', 'Hei', sans-serif">黑体</option> <option value="'楷体', 'KaiTi', 'Kai', serif">楷体</option> </select> </div>  <div class="bold-toggle"> <input type="checkbox" id="boldCheck"> <label for="boldCheck"><strong>B</strong> 加粗</label> </div> </div> <div class="footer-note"> 💡 点击“复制”按钮直接复制全部内容 · 粘贴需要浏览器授权 </div> </div> <script> (function() { // DOM元素 const textarea = document.getElementById('editor'); const copyBtn = document.getElementById('copyBtn'); const pasteBtn = document.getElementById('pasteBtn'); const clearBtn = document.getElementById('clearBtn'); const fontSelect = document.getElementById('fontSelect'); const boldCheck = document.getElementById('boldCheck'); // ---------- 1. 一键复制 ---------- copyBtn.addEventListener('click', async () => { try { // 使用 modern Clipboard API (异步) await navigator.clipboard.writeText(textarea.value); showFeedback(copyBtn, '✅ 已复制'); } catch (err) { // 兼容旧浏览器：使用 document.execCommand (已废弃但备用) try { textarea.select(); document.execCommand('copy'); showFeedback(copyBtn, '✅ 已复制'); } catch (fallbackErr) { alert('复制失败，请手动选择文本后 Ctrl+C (Mac: Cmd+C)'); } } }); // ---------- 2. 一键粘贴 ---------- pasteBtn.addEventListener('click', async () => { try { const text = await navigator.clipboard.readText(); // 在光标位置插入，而不是覆盖全部内容 insertAtCursor(textarea, text); showFeedback(pasteBtn, '📥 已粘贴'); } catch (err) { alert('粘贴失败：请确保浏览器已授权剪贴板访问（通常需要 HTTPS 或 localhost）或检查是否有内容可粘贴。'); } }); // ---------- 3. 一键清空 ---------- clearBtn.addEventListener('click', () => { textarea.value = ''; textarea.focus(); showFeedback(clearBtn, '🗑️ 已清空'); }); // ---------- 4. 字体切换 ---------- fontSelect.addEventListener('change', () => { const selectedFont = fontSelect.value; textarea.style.fontFamily = selectedFont; }); // ---------- 5. 粗体切换 ---------- boldCheck.addEventListener('change', () => { if (boldCheck.checked) { textarea.style.fontWeight = 'bold'; } else { textarea.style.fontWeight = 'normal'; } }); // ---------- 辅助函数 ---------- // 在textarea当前光标处插入文本（兼容ie和现代浏览器） function insertAtCursor(textarea, text) { // 现代浏览器支持 selectionStart/selectionEnd if (typeof textarea.selectionStart === 'number') { const start = textarea.selectionStart; const end = textarea.selectionEnd; const before = textarea.value.substring(0, start); const after = textarea.value.substring(end); textarea.value = before + text + after; // 移动光标到插入文本之后 textarea.selectionStart = textarea.selectionEnd = start + text.length; } else { // 降级方案（IE等老旧浏览器） textarea.value += text; } textarea.focus(); } // 临时按钮反馈（显示成功/失败文案，1.5秒后恢复） function showFeedback(btn, message) { const originalText = btn.innerHTML; btn.innerHTML = message; btn.disabled = true; setTimeout(() => { btn.innerHTML = originalText; btn.disabled = false; }, 1500); } // 可选：初始设置粗体状态为未选中 boldCheck.checked = false; })(); </script> </body> </html> ``` --- ## 🛠️ 使用方法 1. **保存代码**：将以上全部代码复制，保存为 `editor.html`（或任意 `.html` 文件名）。 2. **用浏览器打开**：双击该文件，或拖拽到浏览器窗口。 3. **立即编辑**： - 在黑色框中直接输入文字。 - 点击 **复制** 按钮，全部内容会复制到系统剪贴板。 - 点击 **粘贴** 按钮，将剪贴板文字插入到当前光标位置。 - 点击 **清空** 按钮，一键删除所有文字。 4. **调整样式**： - 下拉 **字体** 菜单，选择“黑体”或“楷体”，编辑框字体即时变化。 - 勾选 **加粗** 复选框，文字即时变粗，取消则恢复常规粗细。 --- ## ⚠️ 重要说明 & 常见问题 ### 🔒 剪贴板权限 - **复制** 和 **粘贴** 功能使用现代 `navigator.clipboard` API。 - 粘贴功能 **要求页面在安全上下文（HTTPS 或 `localhost`）** 下运行。直接在本地 `file://` 协议打开可能被浏览器限制。例如，用 **VS Code Live Server** 或 **Python 简单 HTTP 服务器** 启动即可。 ```bash # Python 3 启动本地服务器（在文件目录运行） python -m http.server 8000 # 然后浏览器访问 http://localhost:8000/editor.html ``` - 如果粘贴失败，页面会提示授权或建议使用快捷键。 ### 🔄 浏览器兼容性 - 现代浏览器（Chrome, Edge, Firefox, Safari 最新版）完全支持。 - 若不支持 `clipboard.readText()`，会回退到传统 `document.execCommand('paste')`（该方法已被弃用且需要额外权限）。 ### 🎨 字体渲染 - 黑体、楷体为中文字体，在大多数 Windows/macOS 系统预装。若用户系统无此字体，浏览器会使用后备字体（默认等线）。 - 您可以根据需要，在 `<option>` 中添加更多字体名称（如 '宋体', '微软雅黑'）。 ### 📝 进阶建议 - **保存草稿**：可增加“保存到本地存储”功能，防止刷新丢失。 - **Markdown 预览**：如果需要，可以集成 Markdown 解析器（如 marked.js）来实时预览。 - **字数统计**：增加显示当前字符数、行数等辅助信息。 - **撤销/重做**：HTML 的 `<textarea>` 原生支持 Ctrl+Z / Ctrl+Y，无需额外实现。 --- ## 💻 开发建议 1. **模块化**：如果未来功能增多（如添加图片、列表），建议将 JavaScript 逻辑拆分为独立模块（ES6 Modules 或单例对象）。 2. **无障碍性**：为所有按钮添加 `aria-label`，确保屏幕阅读器用户可操作。 3. **性能优化**：若编辑框需要处理超长文本（>10万字符），建议使用虚拟文本或分批渲染，避免卡顿。 4. **安全性**：粘贴内容时，不要直接执行 HTML 脚本，本示例仅处理纯文本，安全无风险。 5. **扩展性**：当前字体和粗体只能作用于整个编辑框。若需要段落级或选区级的样式控制，可以升级为 `contenteditable` 的 `div` 但复杂度会大幅增加。 --- ######[AI写代码神器 | 3223点数解答 | 2026-06-14 22:18:28]

服务商

更多选项

快捷项

自定义