Format from TinyMCE editor will not be sent via E-Mail using PHP-Mailer
Question
Alright, I have been searching for days, and I can't get it to work correctly. I am using a modal to show a form, where people should be able to enter Name, an identifier, choose a recipient, add an attachment and - enter text, which they can format (tinymce). Whatever I have tried, the content comes as plain text - no format at all. I am sure, it might be only a little mistake, and most of you will be like "stop throwing code together like a maniac" - yet still, I have no idea where to search or what to search for even. Any help would be highly appreciated. Sorry for the bad formatting of the lower part - even here, I don't get it to work, I really appreciate anyone's help!
Here is the code from the page:
This is the tinyMCE-Editor
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdn.tiny.cloud/1/zx5yw56lg534zm3hbmekc4i7ex3y27nu7qi3nyrszogdohz3/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector:'#editor',
// If we don't need the menubar or statusbar we can hide them
// https://www.tiny.cloud/docs/configure/editor-appearance/#menubar
// https://www.tiny.cloud/docs/configure/editor-appearance/#statusbar
menubar: false,
statusbar: false,
// Tip! To make TinyMCE leaner, only include the plugins you actually need.
plugins: 'autoresize lists',
// This option allows you to specify the buttons and the order that they
// will appear on TinyMCE’s toolbar.
// https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
toolbar: 'bold italic strikethrough blockquote bullist numlist | fullscreen ',
// We use the Bootstrap premium skin to make TinyMCE match the
// visual style of Bootstrap, primarily colors and the dialogs.
// You can also create your own bootstrap skin.
// https://www.tiny.cloud/docs/enterprise/premium-skins-and-icon-packs/outside-demo/
// https://www.tiny.cloud/docs/configure/editor-appearance/#skin
// https://www.tiny.cloud/docs/advanced/creating-a-skin/
skin: 'bootstrap',
// Setting the minimum height when using the autoresize plugin
// https://www.tiny.cloud/docs/configure/editor-appearance/#min_height
min_height: 400,
// Set the whitespace between the bottom most row and the bottom of the editor
// https://www.tiny.cloud/docs/plugins/autoresize/#autoresize_bottom_margin
autoresize_bottom_margin: 20,
// To make sure the toolbar never scrolls out of view which can happen when
// writing very long texts while using the autoresize plugin. This option
// sticks the toolbar to the top of the screen while the editable area
// is visible
// https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar_sticky
toolbar_sticky: true,
setup: (editor) => {
// Apply the Bootstrap focus outline and associated animation
// Read more about different editor events in the documentation
// https://www.tiny.cloud/docs/advanced/events/
editor.on('init', () => {
// https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#getcontainer
editor.getContainer().style.transition="border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out"
});
editor.on('focus', () => {
editor.getContainer().style.boxShadow="0 0 0 .2rem rgba(0, 123, 255, .25)",
editor.getContainer().style.borderColor="#80bdff"
});
editor.on('blur', () => {
editor.getContainer().style.boxShadow="",
editor.getContainer().style.borderColor=""
});
}
});
</script>
</head>
<body>
Here comes the Modal-Form
<button type="button" class="btn btn-primary mt-3 ml-3" data-toggle="modal" data-target="#exampleModal">
Schick uns deine I-Story
</button>
<!-- Modal -->
<?php if(empty($msg)){ ?>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form method="POST" enctype="multipart/form-data" class="container" id="needs-validation" novalidate>
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">I-Story-Formular</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="text" class="form-control" name="username" placeholder="Name">
<div class="invalid-feedback">
Bitte gib deinen Namen ein.
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input type="Text" class="form-control" name="ibc" placeholder="Consultant-Nummer">
<div class="invalid-feedback">
Bitte gib deine Consultantnummer an.
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<select name="to" class="form-control">
<option value="sales">Contact us</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea class="form-control" name="reason" id="editor" rows="7" required=""></textarea>
<div class="invalid-feedback">
Trage hier bitte deine I-Story ein.
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<!-- <input type="file" name="attachment"> -->
<input type="hidden" name="MAX_FILE_SIZE" required="" value="10000000"> Bild anfügen (Max. 10 MB!): <input name="attachment" type="file">
<div class="invalid-feedback">
Bitte füge ein Bild hinzu...
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Schließen</button>
<button type="submit" class="btn btn-primary" name="feedback">I-Story abschicken</button>
</div>
</form>
</div>
</div>
</div>
<?php }else{
echo $msg;
} ?>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script>
(function() {
'use strict';
window.addEventListener('load', function() {
var form = document.getElementById('needs-validation');
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
}, false);
})();
</script>
</body>
</html>
And finally the php-mailer (in my code on top)
<!DOCTYPE html>
<?php
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\SMTP;
use PHPMailer\PHPMailer\Exception;
require("src/PHPMailer.php");
require("src/SMTP.php");
require("src/Exception.php");
if (array_key_exists('to', $_POST)) {
$err = false;
$msg = '';
$email = '';
//Apply some basic validation and filtering to the query
if (array_key_exists('reason', $_POST)) {
//Limit length and strip HTML tags
$reason = substr(strip_tags($_POST['reason']), 0, 16384);
} else {
$reason = '';
$msg = 'No feedback provided!';
$err = true;
}
//Apply some basic validation and filtering to the name
if (array_key_exists('username', $_POST)) {
//Limit length and strip HTML tags
$username = substr(strip_tags($_POST['username']), 0, 255);
} else {
$username = '';
}
//Validate to address
//Never allow arbitrary input for the 'to' address as it will turn your form into a spam gateway!
//Substitute appropriate addresses from your own domain, or simply use a single, fixed address
if (array_key_exists('to', $_POST)) {
$to = 'myself@work.com';
}
if (array_key_exists('attachment', $_FILES)) {
$img_name = $_FILES['attachment']['name'];
$upload = tempnam(sys_get_temp_dir(), hash('sha256', $_FILES['attachment']['name']));
$uploadfile = $_SERVER['DOCUMENT_ROOT'].'/comcloud/istory/mail/assets/img/'.$img_name;
if (move_uploaded_file($_FILES['attachment']['tmp_name'], $uploadfile)) {
if (!$err) {
$mail = new PHPMailer(true);
$mail->isSMTP();
// $mail->SMTPDebug = 3;
$mail->SMTPSecure = 'tls';
$mail->Host = 'smtp.something.de';
// set a port
$mail->Port = 587;
$mail->SMTPAuth = true;
// set login detail for smtp account
$mail->Username = 'whatever';
$mail->Password = 'private';
$mail->CharSet = 'utf-8';
// set subject
$mail->setFrom('mail@something.de');
$mail->addAddress($to);
$mail->addReplyTo('mail@spomething.de');
$mail->addAttachment($uploadfile);
$mail->IsHTML(true);
$mail->Subject = ($_POST['ibc']);
$mail->Body = $reason;
if (!$mail->send()) {
$msg .= "Mailer Error: " . $mail->ErrorInfo;
} else {
$msg .= "I-Story erfolgreich abgeschickt!";
header("Refresh:3; url=index.php");
}
}
} else {
$msg .= 'Failed to move file to ' . $uploadfile;
}
}
}
?>
</html>
1 answers
solution1
2 ACCPTED 2020-10-16 20:48:42
This might seem blindingly obvious, but you're doing this:
$reason = substr(strip_tags($_POST['reason']), 0, 16384);
...
$mail->Body = $reason;
So you're deliberately stripping all HTML tags from your message body. Not surprisingly, this will result in a plain-text message.
You should sanitise your HTML since it's user-supplied (and thus potentially malicious), though that is not an easy thing to do – look at things like HTML Purifier and htmlAwed to help with that.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
PHP Mailer e-mail sent but not received
issues/errors with from php form for sending email via local host Xampp using php-mailer library
How to Encrypt and Sign e-mail using PHP mailer?
Sending a multipart E-Mail using PHP Mailer/wp_mail - not all clients display E-Mail
Why Php Mailer is not sending E-mail If sender is Yahoo Mail
E-mail not getting sent in PHP
Send Errors in PHP via E-Mail
verify a user via e-mail in PHP
Putting E-mail into “sent” folder after PHP mail function
PHP mail returns TRUE, but e-mail is not sent
Related Tags