🎨 邀请函编辑器

基于模板 "经典婚礼请帖 2" 创建您的专属邀请函

返回模板中心

内容设置 (经典婚礼请帖 2)

该模板暂未定义可编辑字段，使用默认字段。

样式设置

预览设置

经典婚礼请帖 2

经典婚礼请帖 2

经典

请在左侧填写邀请函内容，预览将实时更新

'; // 获取表单值并替换模板中的占位符 const title = document.getElementById('title')?.value || ''; const brideName = document.getElementById('bride_name')?.value || ''; const groomName = document.getElementById('groom_name')?.value || ''; const eventDate = document.getElementById('event_date')?.value || ''; const eventLocation = document.getElementById('event_location')?.value || ''; // 替换常见的占位符 fullHtml = fullHtml.replace(/ئالىمجان/g, groomName || '新郎姓名'); // 新郎名 fullHtml = fullHtml.replace(/ئادىلە/g, brideName || '新娘姓名'); // 新娘名 fullHtml = fullHtml.replace(/诚邀您参加我们的婚礼/g, title || '诚邀您参加我们的婚礼'); // 标题 fullHtml = fullHtml.replace(/2025-يىلى10-ئاينىڭ10-كۈنى سائەت بېيجىڭ ۋاقتى7:30 دا/g, eventDate ? new Date(eventDate).toLocaleDateString('zh-CN') : '待定日期'); fullHtml = fullHtml.replace(/ئۈرۈمچى غەربىي يۇلتۇز مەرىكە زالى/g, eventLocation || '举办地点'); fullHtml = fullHtml.replace(/ئۈرۈمچى شەھىرى ئازاتلىق يۇلى 100 نۇمۇر/g, eventLocation || '详细地址'); // 使用iframe显示模板内容 previewContainer.innerHTML = ``; // 设置iframe内容 - 简化设置 const iframe = document.getElementById('preview-iframe'); if (iframe) { console.log('设置iframe内容，fullHtml长度:', fullHtml.length); // 直接设置srcdoc，不使用try-catch iframe.srcdoc = fullHtml; console.log('iframe内容已设置'); } else { console.error('找不到iframe元素'); // 如果找不到iframe，直接显示HTML内容 previewContainer.innerHTML += '
预览内容：
' + fullHtml.substring(0, 1000) + '
'; } } else if (templateData.editable_fields && templateData.editable_fields.length > 0) { let html = generateTemplatePreviewHtml(); // 获取表单值 const title = document.getElementById('title')?.value || ''; const brideName = document.getElementById('bride_name')?.value || ''; const groomName = document.getElementById('groom_name')?.value || ''; const eventDate = document.getElementById('event_date')?.value || ''; const eventLocation = document.getElementById('event_location')?.value || ''; // 替换模板中的占位符文本 html = html.replace(/ئالىمجان/g, groomName || 'ئالىمجان'); // 新郎名 html = html.replace(/ئادىلە/g, brideName || 'ئادىلە'); // 新娘名 html = html.replace(/2025-يىلى10-ئاينىڭ10-كۈنى سائەت بېيجىڭ ۋاقتى7:30 دا/g, eventDate ? new Date(eventDate).toLocaleDateString('zh-CN') : '2025-يىلى10-ئاينىڭ10-كۈنى سائەت بېيجىڭ ۋاقتى7:30 دا'); html = html.replace(/ئۈرۈمچى غەربىي يۇلتۇز مەرىكە زالى/g, eventLocation || 'ئۈرۈمچى غەربىي يۇلتۇز مەرىكە زالى'); // 宴会厅 html = html.replace(/ئۈرۈمچى شەھىرى ئازاتلىق يۇلى 100 نۇمۇر/g, eventLocation || 'ئۈرۈمچى شەھىرى ئازاتلىق يۇلى 100 نۇمۇر'); // 宴会厅地址 previewContainer.innerHTML = html; } else { // fallback到原来的预览逻辑 const title = document.getElementById('title')?.value || ''; const brideName = document.getElementById('bride_name')?.value || ''; const groomName = document.getElementById('groom_name')?.value || ''; const eventDate = document.getElementById('event_date')?.value || ''; const eventLocation = document.getElementById('event_location')?.value || ''; const eventDescription = document.getElementById('event_description')?.value || ''; if (title || brideName || groomName || eventDate || eventLocation || eventDescription) { // 有内容时显示预览 previewContainer.innerHTML = `

${title || '邀请函标题'}

${brideName || groomName ? `
${brideName && groomName ? `${brideName} & ${groomName}` : brideName ? brideName : groomName}
喜结良缘
` : ''} ${eventDate ? `
举办时间
${new Date(eventDate).toLocaleString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' })}
` : ''} ${eventLocation ? `
举办地点
${eventLocation}
` : ''} ${eventDescription ? `
${eventDescription}
` : ''}
敬请光临 · 共赴良辰
`; } else { // 无内容时显示模板封面（而不是占位符） if (templateData.id) { previewContainer.innerHTML = `
经典婚礼请帖 2

经典婚礼请帖 2

经典

请在左侧填写邀请函内容，预览将实时更新

`; } else { previewContainer.innerHTML = `

开始创建您的邀请函

请在左侧填写邀请函内容，预览将实时更新

`; } } } } // 保存草稿 function saveDraft() { const formData = new FormData(document.getElementById('invitation-form')); // 显示保存中状态 const saveBtn = event.target; const originalText = saveBtn.innerHTML; saveBtn.innerHTML = '保存中...'; saveBtn.disabled = true; axios.post('/api/invitations/create/', formData, { headers: { 'X-CSRFToken': getCsrfToken() } }) .then(response => { if (response.data.success) { showNotification('草稿保存成功', 'success'); } else { showNotification(response.data.message || '保存失败', 'error'); } }) .catch(error => { console.error('保存失败:', error); showNotification('保存失败，请重试', 'error'); }) .finally(() => { saveBtn.innerHTML = originalText; saveBtn.disabled = false; }); } // 生成邀请函 function generateInvitation() { const form = document.getElementById('invitation-form'); if (!form.checkValidity()) { form.reportValidity(); return; } const formData = new FormData(form); // 显示生成中状态 const generateBtn = event.target; const originalText = generateBtn.innerHTML; generateBtn.innerHTML = '生成中...'; generateBtn.disabled = true; axios.post('/api/invitations/create/', formData, { headers: { 'X-CSRFToken': getCsrfToken() } }) .then(response => { if (response.data.success) { showNotification('邀请函生成成功！', 'success'); // 跳转到邀请函详情页面 setTimeout(() => { window.location.href = `/invitations/${response.data.invitation_id}/`; }, 1500); } else { showNotification(response.data.message || '生成失败', 'error'); } }) .catch(error => { console.error('生成失败:', error); showNotification('生成失败，请重试', 'error'); }) .finally(() => { generateBtn.innerHTML = originalText; generateBtn.disabled = false; }); } // 刷新预览 function refreshPreview() { updatePreview(); showNotification('预览已刷新', 'info'); } // 完整预览 function previewFull() { const formData = new FormData(document.getElementById('invitation-form')); const params = new URLSearchParams(); for (let [key, value] of formData.entries()) { if (value) params.append(key, value); } // 打开新窗口进行完整预览 const previewUrl = `/invitations/preview/live/?${params}`; window.open(previewUrl, '_blank', 'width=400,height=600'); } // 模板数据 const templateData = { id: 2, name: "经典婚礼请帖 2", html_content: "", css_styles: "", js_scripts: "", editable_fields: [] }; console.log('模板数据:', templateData); console.log('editable_elements_json:', []); // 如果editable_fields为空，添加测试数据 if (!templateData.editable_fields || templateData.editable_fields.length === 0) { console.log('⚠️ editable_fields为空，使用测试数据'); templateData.editable_fields = [ { 'id': 'invitation_title', 'type': 'TextComponent', 'name': '请柬标题', 'element_key': 'invitation_title', 'label': '请柬标题', 'placeholder': '例如：诚邀您参加我们的婚礼', 'default_value': '诚邀您参加我们的婚礼', 'is_required': true, 'validation': {}, 'style': {'left': 0, 'top': 0, 'width': 200, 'height': 40, 'fontSize': 16, 'color': '#333'}, 'config': {'text': '诚邀您参加我们的婚礼'} }, { 'id': 'groom_name', 'type': 'TextComponent', 'name': '新郎姓名', 'element_key': 'groom_name', 'label': '新郎姓名', 'placeholder': '请输入新郎姓名', 'default_value': '', 'is_required': true, 'validation': {}, 'style': {'left': 0, 'top': 0, 'width': 200, 'height': 40, 'fontSize': 16, 'color': '#333'}, 'config': {'text': '新郎姓名'} }, { 'id': 'bride_name', 'type': 'TextComponent', 'name': '新娘姓名', 'element_key': 'bride_name', 'label': '新娘姓名', 'placeholder': '请输入新娘姓名', 'default_value': '', 'is_required': true, 'validation': {}, 'style': {'left': 0, 'top': 0, 'width': 200, 'height': 40, 'fontSize': 16, 'color': '#333'}, 'config': {'text': '新娘姓名'} }, { 'id': 'wedding_date', 'type': 'DateComponent', 'name': '婚礼日期', 'element_key': 'wedding_date', 'label': '婚礼日期', 'placeholder': '请选择婚礼日期', 'default_value': '', 'is_required': true, 'validation': {}, 'style': {'left': 0, 'top': 0, 'width': 200, 'height': 40, 'fontSize': 16, 'color': '#333'}, 'config': {'text': '婚礼日期'} }, { 'id': 'wedding_venue', 'type': 'TextComponent', 'name': '婚礼地点', 'element_key': 'wedding_venue', 'label': '婚礼地点', 'placeholder': '例如：某某大酒店宴会厅', 'default_value': '', 'is_required': true, 'validation': {}, 'style': {'left': 0, 'top': 0, 'width': 200, 'height': 40, 'fontSize': 16, 'color': '#333'}, 'config': {'text': '婚礼地点'} } }; } console.log('模板数据加载:', templateData); console.log('HTML内容长度:', templateData.html_content.length); console.log('CSS内容长度:', templateData.css_styles.length); console.log('JS内容长度:', templateData.js_scripts.length); console.log('editable_fields:', templateData.editable_fields); // 生成模板预览HTML function generateTemplatePreviewHtml() { const components = templateData.editable_fields; // 如果是对象，转换为数组 const componentsArray = Array.isArray(components) ? components : Object.values(components || {}); if (!componentsArray || componentsArray.length === 0) { return '
暂无可编辑内容
'; } // 检查是否有样式信息 const hasStyleInfo = componentsArray.some(element => element.style && Object.keys(element.style).length > 0); if (hasStyleInfo) { // 如果有样式信息，使用绝对定位布局（原始模板布局） let html = ''; componentsArray.forEach(element => { const style = element.style || {}; const config = element.config || {}; let elementHtml = ''; if (element.type === 'TextComponent') { const text = config.text || element.name || '文本内容'; elementHtml = `
${text}
`; } html += elementHtml; }); return `
${html}
`; } else { // 如果没有样式信息，使用友好的垂直布局 let html = ''; componentsArray.forEach((element, index) => { const config = element.config || {}; const isRequired = element.is_required || false; let elementHtml = ''; if (element.type === 'TextComponent') { const text = config.text || element.default_value || element.name || '请填写内容'; const fontSize = element.element_key === 'invitation_title' ? '24px' : '18px'; const fontWeight = element.element_key === 'invitation_title' ? 'bold' : 'normal'; const textAlign = element.element_key === 'invitation_title' ? 'center' : 'left'; const marginBottom = index < componentsArray.length - 1 ? '20px' : '0'; elementHtml = `
${isRequired ? '*' : ''} ${element.name}:
${text}
`; } html += elementHtml; }); return `

💒 婚礼邀请函

${html}
诚邀您参加我们的婚礼 · 共赴良辰
`; } } // 初始化 document.addEventListener('DOMContentLoaded', function() { console.log('🎨 初始化邀请编辑器...'); // 选项卡切换事件 document.querySelectorAll('.tab-button').forEach(button => { button.addEventListener('click', () => switchTab(button.dataset.tab)); }); // 表单输入事件 - 实时更新预览 const formInputs = document.querySelectorAll('#invitation-form input, #invitation-form textarea'); formInputs.forEach(input => { input.addEventListener('input', updatePreview); }); // 初始化预览 updatePreview(); showNotification('🎨 欢迎使用邀请函编辑器！', 'success'); console.log('✅ 邀请编辑器初始化完成'); });