英文:
Maintain Text Formatting from Form Submission to Email
问题
I am trying to maintain formatting/styling of text that is submitted from a form. The text styling is done using TinyMCE. What happens when the form is submitted is, it's first saved to a google sheet. Within the same function, after everything from the form is saved to the google sheet, it then takes all of the data that it just submitted, prepares it in an email using an email template html file, and then sends the email out.
Here is the issue: The formatting of the text is not maintained from the form submission to the email. What I mean by that is, if in the TinyMCE text editor, I bold something, for example, test, it would appear as test in the text editor. However, on the email side of things, it would look like this: <p><em><strong>test</strong></em></p>, which is how it is saved in the database (google sheet). I've tried multiple ways of getting it to work, and each have come up short. To test and see if it was possible to maintain formatting from the google sheet to the email, I tried this in my code:
let alertDetails = data[0]['Alert Details']
let alertDetailsHtml = HtmlService.createHtmlOutput(alertDetails).getContent()
That seemed to work at making sure the text kept its styling if I set html: alertDetailsHtml, however if I try and use the email template, like I want to do, it either errors out, or does not work. I also tried:
<div><?= HtmlService.createHtmlOutput(data[0]['Alert Details']).getContent() ?></div>
in the html email template, and that also didn't work. I will include all of the relevant code so far:
saving the alerts function:
function saveAlerts(data) {
//Gets all the data in the alerts sheet
let sheetData = alerts.getDataRange().getDisplayValues()
//Get keys from the first row of the sheet
let keys = sheetData[0]
//For each alert in the array, create a temporary array containing the values for each column in the sheet
data.forEach(el => {
let temp = []
keys.forEach(key => {
temp.push(el[key])
})
//Append the temporary array as a new row in the sheet
alerts.appendRow(temp)
})
let template = HtmlService.createTemplateFromFile('htmlEmail');
template.data = data;
template.alertDetails= HtmlService.createHtmlOutput(data[0]['Alert Details']
).getContent()
let message = template.evaluate().getContent();
//Takes the data variable and pulls out the the 'Alert Subject' and 'Alert Details', and appends them to an email that is sent out when the form is submitted
MailApp.sendEmail({
to: 'lofton.gentry@one-line.com',
subject: `${data[0]['Alert Subject']}`,
htmlBody: message,
replyTo: `${data[0]['User Email']}`
})
}
The relevant portion of the HTML email template:
<body>
<div class="alert-container">
<div class="alert-header" id="alertHeader">
<p class="alert-title">New Alert</p>
</div>
<div class="alert-body">
<p id="alert-type"><strong>Type:</strong>
<?= data[0]['Alert Type'] ?>
</p>
<p id="alert-date"><strong>Alert Date:</strong>
<?= data[0]['Alert Date'] ?>
</p>
<p id="alert-loc"><strong>Location:</strong>
<?= data[0]['Alert Location'] ?>
</p>
<p id="alert-loc"><strong>Code:</strong>
<?= data[0]['Alert Code'] ?>
</p>
<p id="alert-loc"><strong>Affected:</strong>
<?= data[0]['Services Affected'] ?>
</p>
<p id="alert-add"><strong>Alert Address:</strong>
<?= data[0]['Alert Address'] ?>
</p>
<p id="alert-details"><strong>Alert Details:</strong></p>
<div><?= alertDetails ?></div>
</div>
</div>
</body>
I can provide further details and clarification as necessary
An example, as requested. This is the entire form input. I will include the name of the input and the expected result on the email. NOTE: Some of the inputs are hidden, but are automatically filled based on selection on the form.
In the form:
(Select) Alert Type: Port/Vessel Operations
(Select) Alert Location: Packer Avenue Marine Terminal
(Text) Alert Subject: test
(TextArea) Alert Details: **test** (this is actually bold in the text editor)
(Date) Alert Date: 5/11/2023
(Select) Email: An email
Expected Result in Email:
Type: Port/Vessel Operations
Alert Date: 2023/05/11
Location: Packer Avenue Marine Terminal
(Hidden Input) Code: USPHL02
(Hidden Input) Affected: AL2
(Hidden Input) Alert Address: Packer Avenue Marine Terminal 3301 South Columbus Blvd Philadelphia PA 19148
Alert Details: **test** (this is actually bold text in the email)
Actual Result in Email:
Type: Port/Vessel Operations
Alert Date: 2023/05/11
Location: Packer Avenue Marine Terminal
(Hidden Input) Code: USPHL02
(Hidden Input) Affected: AL2
(Hidden Input) Alert Address: Packer Avenue Marine Terminal 3301 South Columbus Blvd Philadelphia PA 19148
Alert Details: <p><strong>test</strong></p>
英文:
I am trying to maintain formatting/styling of text that is submitted from a form. The text styling is done using TinyMCE. What happens when the form is submitted is, it's first saved to a google sheet. Within the same function, after everything from the form is saved to the google sheet, it then takes all of the data that it just submitted, prepares it in an email using an email template html file, and then sends the email out.
Here is the issue: The formatting of the text is not maintained from the form submission to the email. What I mean by that is, if in the TinyMCE text editor, I bold something, for example, test, it would appear as test in the text editor. However, on the email side of things, it would look like this: <p><em><strong>test</strong></em></p>, which is how it is saved in the database (google sheet). I've tried multiple ways of getting it to work, and each have come up short. To test and see if it was possible to maintain formatting from the google sheet to the email, I tried this in my code:
let alertDetails = data[0]['Alert Details']
let alertDetailsHtml = HtmlService.createHtmlOutput(alertDetails).getContent()
That seemed to work at making sure the text kept it's styling if I set html: alertDetailsHtml, however if I try and use the email template, like I want to do, it either errors out, or does not work. I also tried:
<div><?= HtmlService.createHtmlOutput(data[0]['Alert Details']).getContent() ?></div>
in the html email template, and that also didn't work. I will include all of the relevant code so far:
saving the alerts function:
function saveAlerts(data) {
//Gets all the data in the alerts sheet
let sheetData = alerts.getDataRange().getDisplayValues()
//Get keys from the first row of the sheet
let keys = sheetData[0]
//For each alert in the array, create a temporary array containing the values for each column in the sheet
data.forEach(el => {
let temp = []
keys.forEach(key => {
temp.push(el[key])
})
//Append the temporary array as a new row in the sheet
alerts.appendRow(temp)
})
let template = HtmlService.createTemplateFromFile('htmlEmail');
template.data = data;
template.alertDetails= HtmlService.createHtmlOutput(data[0]['Alert Details']
).getContent()
let message = template.evaluate().getContent();
//Takes the data variable and pulls out the the 'Alert Subject' and 'Alert Details', and appends them to an email that is sent out when the form is submitted
MailApp.sendEmail({
to: 'lofton.gentry@one-line.com',
subject: `${data[0]['Alert Subject']}`,
htmlBody: message,
replyTo: `${data[0]['User Email']}`
})
}
The relevant portion of the HTML email template:
<body>
<div class="alert-container">
<div class="alert-header" id="alertHeader">
<p class="alert-title">New Alert</p>
</div>
<div class="alert-body">
<p id="alert-type"><strong>Type:</strong>
<?= data[0]['Alert Type'] ?>
</p>
<p id="alert-date"><strong>Alert Date:</strong>
<?= data[0]['Alert Date'] ?>
</p>
<p id="alert-loc"><strong>Location:</strong>
<?= data[0]['Alert Location'] ?>
</p>
<p id="alert-loc"><strong>Code:</strong>
<?= data[0]['Alert Code'] ?>
</p>
<p id="alert-loc"><strong>Affected:</strong>
<?= data[0]['Services Affected'] ?>
</p>
<p id="alert-add"><strong>Alert Address:</strong>
<?= data[0]['Alert Address'] ?>
</p>
<p id="alert-details"><strong>Alert Details:</strong></p>
<div><?= alertDetails ?></div>
</div>
</div>
</body>
I can provide further details and clarification as necessary
An example, as requested. This is the entire form input. I will include the name of the input and the expected result on the email. NOTE: Some of the inputs are hidden, but are automatically filled based on selection on the form.
In the form:
(Select) Alert Type: Port/Vessel Operations
(Select) Alert Location: Packer Avenue Marine Terminal
(Text) Alert Subject: test
(TextArea) Alert Details: **test** (this is actually bold in the text editor)
(Date) Alert Date: 5/11/2023
(Select) Email: An email
Expected Result in Email:
Type: Port/Vessel Operations
Alert Date: 2023/05/11
Location: Packer Avenue Marine Terminal
(Hidden Input) Code: USPHL02
(Hidden Input) Affected: AL2
(Hidden Input) Alert Address: Packer Avenue Marine Terminal 3301 South Columbus Bllvd Philadelphia PA 19148
Alert Details: **test** (this is actually bold text in the email)
Actual Result in Email:
Type: Port/Vessel Operations
Alert Date: 2023/05/11
Location: Packer Avenue Marine Terminal
(Hidden Input) Code: USPHL02
(Hidden Input) Affected: AL2
(Hidden Input) Alert Address: Packer Avenue Marine Terminal 3301 South Columbus Bllvd Philadelphia PA 19148
Alert Details: <p><strong>test</strong></p>
答案1
得分: 0
I needed to change <div><?= alertDetails ?></div> to this: <div><?!= alertDetails ?></div> to include the actual HTML into my script, and not just a string. To quote the answer I linked, the tags <?= ?> basically print out the input from the form as a string, not converting the tags into actual HTML like I wanted.
英文:
Going off of this answer from a very similar previous question here: I needed to change <div><?= alertDetails ?></div> to this: <div><?!= alertDetails ?></div> to include the actual HTML into my script, and not just a string. To quote the answer I linked, the tags <?= ?> basically print out the input from the form as a string, not converting the tags into actual HTML like I wanted.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论