🎨 邀请函编辑器

基于模板 "ئۈسمۈر توي باغىقى تاق رەسىم نوسقا" 创建您的专属邀请函

返回模板中心

内容设置 (ئۈسمۈر توي باغىقى تاق رەسىم نوسقا)

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

样式设置

预览设置

ئۈسمۈر توي باغىقى تاق رەسىم نوسقا

ئۈسمۈر توي باغىقى تاق رەسىم نوسقا

رەسىمنىڭ تەۋسىيە چوڭ كىچىكىلىكى 570*1000 ،ھەرقانداق رەڭ تۈسىدىكى سۆرەتلەر ماس كىلىدۇ.

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

'; // 获取表单值并替换模板中的占位符 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 = `
ئۈسمۈر توي باغىقى تاق رەسىم نوسقا

ئۈسمۈر توي باغىقى تاق رەسىم نوسقا

رەسىمنىڭ تەۋسىيە چوڭ كىچىكىلىكى 570*1000 ،ھەرقانداق رەڭ تۈسىدىكى سۆرەتلەر ماس كىلىدۇ.

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

`; } 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: 23, name: "ئۈسمۈر توي باغىقى تاق رەسىم نوسقا", 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('✅ 邀请编辑器初始化完成'); });