AEL语言HTML生成器

将AEL代码转换为HTML，支持.ael文件上传/下载，实时预览转换结果

AEL代码编辑器

我的第一个AEL页面 body { font-family: Arial, sans-serif; margin: 40px; } h1 { color: #0a84ff; } 欢迎使用AEL语言这是一个使用AEL语言编写的HTML页面示例。下面是一个图片和链接示例：访问示例网站获取更多信息。这是一个DIV容器中的标题 DIV容器中的段落文本。

HTML预览

HTML预览区域

点击"转换为HTML"按钮，将AEL代码转换为HTML并在此预览

AEL ↔ HTML 映射表

<A1> - <h1>

一级标题标签

<A2> - <h2>

二级标题标签（以此类推到A6）

<AP> - <p>

段落标签

<AWEB> - <a>

超链接标签

<AIMG> - <img>

图片标签

<AMP3> - <audio>

音频标签

<AMP4> - <video>

视频标签

// -

注释标签

新手教程

编写AEL代码

在左侧编辑器中使用AEL标签编写代码。AEL是一种简化HTML的自定义语言，每个AEL标签对应一个HTML标签。

上传/下载文件

点击"上传.ael文件"导入已有AEL代码，或点击"下载.ael文件"将当前代码保存为.ael格式。

转换为HTML

点击"转换为HTML"按钮，将AEL代码转换为标准HTML，并在右侧预览区域查看结果。

切换主题

点击右上角的主题切换按钮，在黑金和白金主题之间切换，选择您喜欢的界面风格。

', '//': '/g, '-->'); // 确保有完整的HTML结构 if (!htmlCode.includes('')) { htmlCode = `\n\n${htmlCode}\n`; } return htmlCode; } // 更新HTML预览 function updateHtmlPreview() { const aelCode = aelEditor.textContent; const htmlCode = convertAelToHtml(aelCode); // 清除预览区域 htmlPreview.innerHTML = ''; // 创建iframe来显示HTML结果 const iframe = document.createElement('iframe'); iframe.style.width = '100%'; iframe.style.height = '100%'; iframe.style.border = 'none'; iframe.style.borderRadius = '8px'; htmlPreview.appendChild(iframe); // 将HTML写入iframe const iframeDoc = iframe.contentDocument || iframe.contentWindow.document; iframeDoc.open(); iframeDoc.write(htmlCode); iframeDoc.close(); } // 下载AEL文件 function downloadAelFile() { const aelCode = aelEditor.textContent; const blob = new Blob([aelCode], { type: 'text/plain' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `ael-code-${Date.now()}.ael`; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); // 显示成功提示 showNotification('AEL文件下载成功！', 'success'); } // 上传AEL文件 function uploadAelFile(event) { const file = event.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = function(e) { const content = e.target.result; aelEditor.textContent = content; // 显示成功提示 showNotification('AEL文件上传成功！', 'success'); }; reader.readAsText(file); // 重置文件输入，以便可以再次选择同一文件 fileInput.value = ''; } // 清空编辑器 function clearEditor() { if (confirm('确定要清空编辑器内容吗？')) { aelEditor.textContent = ''; htmlPreview.innerHTML = `

HTML预览区域

点击"转换为HTML"按钮，将AEL代码转换为HTML并在此预览

`; showNotification('编辑器已清空', 'warning'); } } // 复制HTML代码到剪贴板 function copyHtmlToClipboard() { const aelCode = aelEditor.textContent; const htmlCode = convertAelToHtml(aelCode); navigator.clipboard.writeText(htmlCode).then(() => { showNotification('HTML代码已复制到剪贴板', 'success'); }).catch(err => { console.error('复制失败: ', err); showNotification('复制失败，请手动复制', 'danger'); }); } // 显示通知 function showNotification(message, type) { // 移除之前的通知 const existingNotification = document.querySelector('.notification'); if (existingNotification) { existingNotification.remove(); } // 创建新通知 const notification = document.createElement('div'); notification.className = `notification notification-${type}`; notification.textContent = message; notification.style.cssText = ` position: fixed; top: 100px; right: 20px; background: ${type === 'success' ? 'var(--success-color)' : type === 'warning' ? 'var(--warning-color)' : 'var(--danger-color)'}; color: white; padding: 15px 25px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); z-index: 1000; font-weight: 600; animation: slideIn 0.3s ease-out; `; document.body.appendChild(notification); // 3秒后自动移除 setTimeout(() => { notification.style.animation = 'slideOut 0.3s ease-out'; setTimeout(() => { if (notification.parentNode) { notification.parentNode.removeChild(notification); } }, 300); }, 3000); } // 添加CSS动画 const style = document.createElement('style'); style.textContent = ` @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } } `; document.head.appendChild(style); // 事件监听器 convertBtn.addEventListener('click', updateHtmlPreview); downloadBtn.addEventListener('click', downloadAelFile); uploadBtn.addEventListener('click', () => fileInput.click()); fileInput.addEventListener('change', uploadAelFile); clearBtn.addEventListener('click', clearEditor); copyHtmlBtn.addEventListener('click', copyHtmlToClipboard); // 初始转换 updateHtmlPreview();