当前位置：首页 > news >正文

文件编辑html

news 2025/8/12 6:03:56

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文件行内容编辑器</title><script src="https://cdn.tailwindcss.com"></script><link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"><!-- Tailwind 配置 --><script>tailwind.config = {theme: {extend: {colors: {primary: '#3B82F6',secondary: '#10B981',accent: '#6366F1',neutral: '#1F2937',danger: '#EF4444',},fontFamily: {sans: ['Inter', 'system-ui', 'sans-serif'],mono: ['Fira Code', 'monospace'],},}}}</script><style type="text/tailwindcss">@layer utilities {.content-auto {content-visibility: auto;}.text-shadow {text-shadow: 0 2px 4px rgba(0,0,0,0.1);}.transition-height {transition: max-height 0.3s ease-in-out;}.line-number {user-select: none;}}</style>
</head>
<body class="bg-gray-50 min-h-screen font-sans text-gray-800"><!-- 顶部导航 --><header class="bg-white shadow-md fixed w-full top-0 z-50 transition-all duration-300" id="header"><div class="container mx-auto px-4 py-3 flex justify-between items-center"><div class="flex items-center space-x-2"><i class="fa fa-file-text-o text-primary text-2xl"></i><h1 class="text-xl font-bold text-neutral">文件行内容编辑器</h1></div><div class="hidden md:flex items-center space-x-6"><a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200 flex items-center"><i class="fa fa-question-circle mr-1"></i> 帮助</a><a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200 flex items-center"><i class="fa fa-info-circle mr-1"></i> 关于</a></div></div></header><!-- 主内容区 --><main class="container mx-auto px-4 pt-24 pb-16"><!-- 上传区域 --><section class="mb-10 bg-white rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:shadow-xl"><h2 class="text-xl font-semibold mb-4 text-neutral flex items-center"><i class="fa fa-upload text-primary mr-2"></i> 上传文件</h2><div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-primary transition-colors duration-300" id="drop-area"><i class="fa fa-file-text-o text-5xl text-gray-400 mb-4"></i><p class="mb-4 text-gray-600">拖放文件到此处，或点击选择文件</p><label class="inline-block bg-primary hover:bg-primary/90 text-white font-medium py-2 px-6 rounded-lg cursor-pointer transition-all duration-200 transform hover:scale-105"><i class="fa fa-folder-open mr-1"></i> 选择文件<input type="file" id="file-input" class="hidden" accept=".txt,.c,.cpp,.h,.py,.java,.js,.html,.css,.php"></label><p class="mt-4 text-sm text-gray-500">支持的格式: .txt, .c, .cpp, .h, .py, .java, .js, .html, .css, .php</p></div><div id="file-info" class="mt-4 hidden"><div class="flex items-center p-3 bg-gray-50 rounded-lg border border-gray-200"><i class="fa fa-file text-primary mr-3"></i><div class="flex-grow"><p id="file-name" class="font-medium"></p><p id="file-size" class="text-sm text-gray-500"></p></div><button id="remove-file" class="text-gray-400 hover:text-danger transition-colors"><i class="fa fa-times"></i></button></div></div></section><!-- 文件内容和编辑区域 --><section class="grid grid-cols-1 lg:grid-cols-3 gap-6" id="editor-section"><!-- 左侧：文件内容显示 --><div class="lg:col-span-2"><div class="bg-white rounded-xl shadow-lg p-6 h-full"><h2 class="text-xl font-semibold mb-4 text-neutral flex items-center"><i class="fa fa-file-code-o text-primary mr-2"></i> 文件内容</h2><div class="relative"><div class="absolute left-0 top-0 bottom-0 bg-gray-50 border-r border-gray-200 px-3 py-2 overflow-hidden"><pre id="line-numbers" class="text-right text-gray-500 font-mono text-sm line-number"></pre></div><div class="ml-10 pl-4 border-l border-gray-100"><pre id="file-content" class="font-mono text-sm whitespace-pre-wrap break-all max-h-[500px] overflow-auto"></pre></div></div><div class="mt-4 flex justify-between items-center"><div class="text-sm text-gray-500"><span id="total-lines">0 行</span></div><button id="download-file" class="hidden bg-secondary hover:bg-secondary/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200 flex items-center"><i class="fa fa-download mr-1"></i> 下载修改后的文件</button></div></div></div><!-- 右侧：编辑控制区 --><div><div class="bg-white rounded-xl shadow-lg p-6 h-full"><h2 class="text-xl font-semibold mb-4 text-neutral flex items-center"><i class="fa fa-pencil text-primary mr-2"></i> 行编辑</h2><div id="edit-controls" class="space-y-4 opacity-50 pointer-events-none"><!-- 行号输入 --><div><label for="line-number" class="block text-sm font-medium text-gray-700 mb-1">行号</label><div class="flex"><input type="number" id="line-number" min="1" class="flex-grow px-3 py-2 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" placeholder="输入行号"><button id="goto-line" class="bg-primary hover:bg-primary/90 text-white px-4 rounded-r-lg transition-colors"><i class="fa fa-search"></i></button></div></div><!-- 当前行内容 --><div><label class="block text-sm font-medium text-gray-700 mb-1">当前行内容</label><div class="relative"><textarea id="current-line-content" class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary h-24 resize-none" readonly placeholder="选中行后显示内容"></textarea></div></div><!-- 替换内容 --><div><label for="replace-content" class="block text-sm font-medium text-gray-700 mb-1">替换为</label><textarea id="replace-content" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary h-24 resize-none" placeholder="输入替换内容"></textarea></div><!-- 操作按钮 --><div class="flex space-x-3 pt-2"><button id="replace-line" class="flex-grow bg-accent hover:bg-accent/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200 transform hover:scale-[1.02]"><i class="fa fa-exchange mr-1"></i> 替换</button><button id="reset-edits" class="bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium py-2 px-4 rounded-lg transition-colors"><i class="fa fa-refresh"></i></button></div></div><!-- 状态消息 --><div id="status-message" class="mt-6 p-3 rounded-lg hidden"></div></div></div></section></main><!-- 页脚 --><footer class="bg-neutral text-white py-6"><div class="container mx-auto px-4 text-center"><p>文件行内容编辑器 &copy; 2023</p><p class="text-gray-400 text-sm mt-1">安全提示：所有文件操作均在本地进行，不会上传到服务器</p></div></footer><!-- JavaScript --><script>// 全局变量let fileContent = [];let originalFileContent = [];let currentFile = null;let highlightedLine = null;// DOM 元素const dropArea = document.getElementById('drop-area');const fileInput = document.getElementById('file-input');const fileInfo = document.getElementById('file-info');const fileName = document.getElementById('file-name');const fileSize = document.getElementById('file-size');const removeFile = document.getElementById('remove-file');const fileContentEl = document.getElementById('file-content');const lineNumbersEl = document.getElementById('line-numbers');const totalLinesEl = document.getElementById('total-lines');const lineNumberInput = document.getElementById('line-number');const gotoLineBtn = document.getElementById('goto-line');const currentLineContent = document.getElementById('current-line-content');const replaceContent = document.getElementById('replace-content');const replaceLineBtn = document.getElementById('replace-line');const resetEditsBtn = document.getElementById('reset-edits');const statusMessage = document.getElementById('status-message');const downloadFileBtn = document.getElementById('download-file');const editControls = document.getElementById('edit-controls');const header = document.getElementById('header');// 页面滚动事件 - 改变导航栏样式window.addEventListener('scroll', () => {if (window.scrollY > 10) {header.classList.add('py-2', 'shadow-lg');header.classList.remove('py-3', 'shadow-md');} else {header.classList.add('py-3', 'shadow-md');header.classList.remove('py-2', 'shadow-lg');}});// 显示状态消息function showStatus(message, isError = false) {statusMessage.textContent = message;statusMessage.classList.remove('hidden', 'bg-green-100', 'text-green-800', 'bg-red-100', 'text-red-800');if (isError) {statusMessage.classList.add('bg-red-100', 'text-red-800');} else {statusMessage.classList.add('bg-green-100', 'text-green-800');}// 3秒后自动隐藏setTimeout(() => {statusMessage.classList.add('hidden');}, 3000);}// 渲染文件内容function renderFileContent() {// 清空内容fileContentEl.innerHTML = '';lineNumbersEl.innerHTML = '';// 渲染每一行fileContent.forEach((line, index) => {// 创建行号const lineNumber = document.createElement('span');lineNumber.textContent = `${index + 1}\n`;lineNumber.classList.add('block', 'py-0.5');if (highlightedLine === index + 1) {lineNumber.classList.add('text-primary', 'font-bold');}lineNumbersEl.appendChild(lineNumber);// 创建内容行const contentLine = document.createElement('span');contentLine.textContent = line;contentLine.classList.add('block', 'py-0.5', 'whitespace-pre-wrap');if (highlightedLine === index + 1) {contentLine.classList.add('bg-primary/10', 'font-medium');}// 点击行号选择行contentLine.addEventListener('click', () => {selectLine(index + 1);});fileContentEl.appendChild(contentLine);});// 更新总行数totalLinesEl.textContent = `${fileContent.length} 行`;}// 选择行function selectLine(lineNumber) {if (lineNumber < 1 || lineNumber > fileContent.length) {showStatus('无效的行号', true);return;}// 更新高亮行highlightedLine = lineNumber;// 更新输入框lineNumberInput.value = lineNumber;// 显示当前行内容currentLineContent.value = fileContent[lineNumber - 1];// 滚动到选中的行const lineElements = fileContentEl.querySelectorAll('span');if (lineElements[lineNumber - 1]) {lineElements[lineNumber - 1].scrollIntoView({ behavior: 'smooth', block: 'center' });}// 重新渲染renderFileContent();}// 处理文件function handleFile(file) {currentFile = file;// 显示文件信息fileName.textContent = file.name;fileSize.textContent = `${(file.size / 1024).toFixed(2)} KB`;fileInfo.classList.remove('hidden');// 读取文件内容const reader = new FileReader();reader.onload = (e) => {// 按行分割内容fileContent = e.target.result.split('\n');originalFileContent = [...fileContent]; // 保存原始内容用于重置// 启用编辑控件editControls.classList.remove('opacity-50', 'pointer-events-none');// 显示下载按钮downloadFileBtn.classList.remove('hidden');// 渲染内容renderFileContent();showStatus(`成功加载文件: ${file.name}`);};reader.onerror = () => {showStatus('读取文件时出错', true);};reader.readAsText(file);}// 拖放事件['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {dropArea.addEventListener(eventName, preventDefaults, false);});function preventDefaults(e) {e.preventDefault();e.stopPropagation();}['dragenter', 'dragover'].forEach(eventName => {dropArea.addEventListener(eventName, highlight, false);});['dragleave', 'drop'].forEach(eventName => {dropArea.addEventListener(eventName, unhighlight, false);});function highlight() {dropArea.classList.add('border-primary', 'bg-primary/5');}function unhighlight() {dropArea.classList.remove('border-primary', 'bg-primary/5');}dropArea.addEventListener('drop', handleDrop, false);function handleDrop(e) {const dt = e.dataTransfer;const file = dt.files[0];if (file) {handleFile(file);}}// 文件选择事件fileInput.addEventListener('change', (e) => {const file = e.target.files[0];if (file) {handleFile(file);}});// 移除文件removeFile.addEventListener('click', () => {fileInput.value = '';fileInfo.classList.add('hidden');fileContent = [];originalFileContent = [];currentFile = null;highlightedLine = null;currentLineContent.value = '';replaceContent.value = '';lineNumberInput.value = '';editControls.classList.add('opacity-50', 'pointer-events-none');downloadFileBtn.classList.add('hidden');renderFileContent();showStatus('文件已移除');});// 跳转到指定行gotoLineBtn.addEventListener('click', () => {const lineNumber = parseInt(lineNumberInput.value);if (!isNaN(lineNumber)) {selectLine(lineNumber);} else {showStatus('请输入有效的行号', true);}});// 按Enter键跳转到指定行lineNumberInput.addEventListener('keypress', (e) => {if (e.key === 'Enter') {gotoLineBtn.click();}});// 替换行内容replaceLineBtn.addEventListener('click', () => {const lineNumber = parseInt(lineNumberInput.value);if (isNaN(lineNumber) || lineNumber < 1 || lineNumber > fileContent.length) {showStatus('请选择有效的行号', true);return;}const newContent = replaceContent.value;// 替换内容fileContent[lineNumber - 1] = newContent;// 更新当前行内容显示currentLineContent.value = newContent;// 重新渲染renderFileContent();showStatus(`第 ${lineNumber} 行已更新`);});// 重置编辑resetEditsBtn.addEventListener('click', () => {if (originalFileContent.length > 0) {fileContent = [...originalFileContent];currentLineContent.value = '';replaceContent.value = '';lineNumberInput.value = '';highlightedLine = null;renderFileContent();showStatus('已重置为原始文件内容');}});// 下载文件downloadFileBtn.addEventListener('click', () => {if (!currentFile || fileContent.length === 0) return;// 合并行内容const content = fileContent.join('\n');// 创建Blobconst blob = new Blob([content], { type: 'text/plain' });// 创建下载链接const url = URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;// 生成新文件名const originalName = currentFile.name;const extensionIndex = originalName.lastIndexOf('.');let newName;if (extensionIndex > 0) {newName = `${originalName.substring(0, extensionIndex)}-modified${originalName.substring(extensionIndex)}`;} else {newName = `${originalName}-modified`;}a.download = newName;document.body.appendChild(a);a.click();// 清理setTimeout(() => {document.body.removeChild(a);URL.revokeObjectURL(url);}, 0);showStatus(`文件已下载: ${newName}`);});// 点击上传区域打开文件选择dropArea.addEventListener('click', () => {fileInput.click();});</script>
</body>
</html>