|
| 1 | + |
| 2 | +var rteValue = |
| 3 | + '<p>Dear <span contenteditable="false" class="e-mention-chip"><span>{{FirstName}}</span></span> ' + |
| 4 | + '<span contenteditable="false" class="e-mention-chip"><span>{{LastName}}</span></span>,</p>' + |
| 5 | + '<p>We are thrilled to have you with us! Your unique promotional code for this month is: ' + |
| 6 | + '<span contenteditable="false" class="e-mention-chip"><span>{{PromoCode}}</span></span>.</p>' + |
| 7 | + '<p>Your current subscription plan is: ' + |
| 8 | + '<span contenteditable="false" class="e-mention-chip"><span>{{SubscriptionPlan}}</span></span>.</p>' + |
| 9 | + '<p>Your customer ID is: ' + |
| 10 | + '<span contenteditable="false" class="e-mention-chip"><span>{{CustomerID}}</span></span>.</p>' + |
| 11 | + '<p>Your promotional code expires on: ' + |
| 12 | + '<span contenteditable="false" class="e-mention-chip"><span>{{ExpirationDate}}</span></span>.</p>' + |
| 13 | + "<p>Feel free to browse our latest offerings and updates. If you need any assistance, don't hesitate to contact us at " + |
| 14 | + '<a href="mailto:{{SupportEmail}}"><span contenteditable="false" class="e-mention-chip"><span>{{SupportEmail}}</span></span></a> ' + |
| 15 | + 'or call us at <span contenteditable="false" class="e-mention-chip"><span>{{SupportPhoneNumber}}</span></span>.</p>' + |
| 16 | + '<p>Best regards,<br>The <span contenteditable="false" class="e-mention-chip"><span>{{CompanyName}}</span></span> Team</p>'; |
| 17 | + |
| 18 | +var dropdownContent = |
| 19 | + ' <span style="display:inline-flex;"><span class="e-rte-dropdown-btn-text">Insert Field</span></span>'; |
| 20 | + |
| 21 | +var textToValueMap = { |
| 22 | + 'First Name': 'FirstName', |
| 23 | + 'Last Name': 'LastName', |
| 24 | + 'Support Email': 'SupportEmail', |
| 25 | + 'Company Name': 'CompanyName', |
| 26 | + 'Promo Code': 'PromoCode', |
| 27 | + 'Support Phone Number': 'SupportPhoneNumber', |
| 28 | + 'Customer ID': 'CustomerID', |
| 29 | + 'Expiration Date': 'ExpirationDate', |
| 30 | + 'Subscription Plan': 'SubscriptionPlan', |
| 31 | +}; |
| 32 | + |
| 33 | +var mergeData = [ |
| 34 | + { Name: 'First Name', Field: 'FirstName' }, |
| 35 | + { Name: 'Last Name', Field: 'LastName' }, |
| 36 | + { Name: 'Promo Code', Field: 'PromoCode' }, |
| 37 | + { Name: 'Customer ID', Field: 'CustomerID' }, |
| 38 | + { Name: 'Subscription Plan', Field: 'SubscriptionPlan' }, |
| 39 | + { Name: 'Expiration Date', Field: 'ExpirationDate' }, |
| 40 | + { Name: 'Support Email', Field: 'SupportEmail' }, |
| 41 | + { Name: 'Support Phone Number', Field: 'SupportPhoneNumber' }, |
| 42 | + { Name: 'Company Name', Field: 'CompanyName' }, |
| 43 | +]; |
| 44 | + |
| 45 | +var placeholderData = { |
| 46 | + FirstName: 'John', |
| 47 | + LastName: 'Doe', |
| 48 | + PromoCode: 'ABC123', |
| 49 | + SubscriptionPlan: 'Premium', |
| 50 | + CustomerID: '123456', |
| 51 | + ExpirationDate: '2024-12-31', |
| 52 | + SupportEmail: 'support@example.com', |
| 53 | + SupportPhoneNumber: '+1-800-555-5555', |
| 54 | + CompanyName: 'Example Inc.', |
| 55 | +}; |
| 56 | + |
| 57 | +function onActionBegin(args) { |
| 58 | + if ( |
| 59 | + args.requestType === 'EnterAction' && |
| 60 | + mergeObj.element.classList.contains('e-popup-open') |
| 61 | + ) { |
| 62 | + args.cancel = true; |
| 63 | + } |
| 64 | +} |
| 65 | + |
| 66 | +function onActionComplete(e) { |
| 67 | + if (e.requestType === 'SourceCode') { |
| 68 | + mailMergeEditor |
| 69 | + .getToolbar() |
| 70 | + .querySelector('#merge_data') |
| 71 | + .parentElement.classList.add('e-overlay'); |
| 72 | + mailMergeEditor |
| 73 | + .getToolbar() |
| 74 | + .querySelector('#insertField') |
| 75 | + .parentElement.classList.add('e-overlay'); |
| 76 | + } else if (e.requestType === 'Preview') { |
| 77 | + mailMergeEditor |
| 78 | + .getToolbar() |
| 79 | + .querySelector('#merge_data') |
| 80 | + .parentElement.classList.remove('e-overlay'); |
| 81 | + mailMergeEditor |
| 82 | + .getToolbar() |
| 83 | + .querySelector('#insertField') |
| 84 | + .parentElement.classList.remove('e-overlay'); |
| 85 | + } |
| 86 | +} |
| 87 | + |
| 88 | +function onDropDownClose() { |
| 89 | + if (mailMergeEditor) { |
| 90 | + mailMergeEditor.focusIn(); |
| 91 | + } |
| 92 | +} |
| 93 | + |
| 94 | +function onItemSelect(args) { |
| 95 | + if (args.item.text != null) { |
| 96 | + var value = textToValueMap[args.item.text]; |
| 97 | + var trimmedValue = value.trim(); |
| 98 | + mailMergeEditor.formatter.editorManager.nodeSelection.restore(); |
| 99 | + mailMergeEditor.executeCommand( |
| 100 | + 'insertHTML', |
| 101 | + '<span contenteditable="false" class="e-mention-chip"><span>{{' + |
| 102 | + trimmedValue + |
| 103 | + '}}</span></span> ', |
| 104 | + { undo: true } |
| 105 | + ); |
| 106 | + } |
| 107 | +} |
| 108 | + |
| 109 | +function onClickHandler() { |
| 110 | + if (mailMergeEditor) { |
| 111 | + var editorContent = mailMergeEditor.value; |
| 112 | + var mergedContent = replacePlaceholders(editorContent, placeholderData); |
| 113 | + if (mailMergeEditor.formatter.getUndoRedoStack().length === 0) { |
| 114 | + mailMergeEditor.formatter.saveData(); |
| 115 | + } |
| 116 | + mailMergeEditor.value = mergedContent; |
| 117 | + mailMergeEditor.formatter.saveData(); |
| 118 | + } else { |
| 119 | + console.log('MailMergeEditor is not initialized.'); |
| 120 | + } |
| 121 | +} |
| 122 | + |
| 123 | +function replacePlaceholders(template, data) { |
| 124 | + return template.replace(/{{\s*(\w+)\s*}}/g, function (match, key) { |
| 125 | + var value = data[key.trim()]; |
| 126 | + return value !== undefined ? value : match; |
| 127 | + }); |
| 128 | +} |
| 129 | + |
| 130 | +var mailMergeEditor = new ej.richtexteditor.RichTextEditor({ |
| 131 | + value: rteValue, |
| 132 | + toolbarSettings: { |
| 133 | + items: [ |
| 134 | + 'Bold', |
| 135 | + 'Italic', |
| 136 | + 'Underline', |
| 137 | + '|', |
| 138 | + 'Formats', |
| 139 | + 'Alignments', |
| 140 | + 'OrderedList', |
| 141 | + 'UnorderedList', |
| 142 | + '|', |
| 143 | + 'CreateLink', |
| 144 | + 'Image', |
| 145 | + 'CreateTable', |
| 146 | + '|', |
| 147 | + { tooltipText: 'Merge Data', template: '#merge_data', command: 'Custom' }, |
| 148 | + { |
| 149 | + tooltipText: 'Insert Field', |
| 150 | + template: '#insertField', |
| 151 | + command: 'Custom', |
| 152 | + }, |
| 153 | + 'SourceCode', |
| 154 | + '|', |
| 155 | + 'Undo', |
| 156 | + 'Redo', |
| 157 | + ], |
| 158 | + }, |
| 159 | + actionBegin: onActionBegin, |
| 160 | + actionComplete: onActionComplete, |
| 161 | + saveInterval: 1, |
| 162 | +}); |
| 163 | +mailMergeEditor.appendTo('#mailMergeEditor'); |
| 164 | + |
| 165 | +var insertField = new ej.splitbuttons.DropDownButton({ |
| 166 | + items: [ |
| 167 | + { text: 'First Name' }, |
| 168 | + { text: 'Last Name' }, |
| 169 | + { text: 'Support Email' }, |
| 170 | + { text: 'Company Name' }, |
| 171 | + { text: 'Promo Code' }, |
| 172 | + { text: 'Support Phone Number' }, |
| 173 | + { text: 'Customer ID' }, |
| 174 | + { text: 'Expiration Date' }, |
| 175 | + { text: 'Subscription Plan' }, |
| 176 | + ], |
| 177 | + content: dropdownContent, |
| 178 | + select: onItemSelect, |
| 179 | + close: onDropDownClose, |
| 180 | +}); |
| 181 | +insertField.appendTo('#insertField'); |
| 182 | + |
| 183 | +var mergeField = document.getElementById('merge_data'); |
| 184 | +if (mergeField) { |
| 185 | + mergeField.addEventListener('click', onClickHandler); |
| 186 | +} |
| 187 | + |
| 188 | +var mergeObj = new ej.dropdowns.Mention({ |
| 189 | + dataSource: mergeData, |
| 190 | + fields: { text: 'Name', value: 'Field' }, |
| 191 | + displayTemplate: '<span>{{${Field}}}</span>', |
| 192 | + |
| 193 | + popupWidth: '250px', |
| 194 | + popupHeight: '200px', |
| 195 | + target: mailMergeEditor.inputElement, |
| 196 | + mentionChar: '{{', |
| 197 | + allowSpaces: true, |
| 198 | +}); |
| 199 | +mergeObj.appendTo('#mentionField'); |
0 commit comments