Как я могу отправить письма HTML с включенным CSS с PHPMailer?
HTML-код:
<p>
application-detail works!
</p>
<form [formGroup]="myForm" novalidate>
<my-date-picker id="input-zero" [options]="myDatePickerOptions" formControlName="myDateZero" (dateChanged)="onDateChanged($event)">
</my-date-picker>
<my-date-picker id="input-one" [options]="myDatePickerOptions" formControlName="myDateOne" (dateChanged)="onDateChanged($event)">
</my-date-picker>
<my-date-picker id="input-two" [options]="myDatePickerOptions" formControlName="myDateTwo" (dateChanged)="onDateChanged($event)">
</my-date-picker>
<my-date-picker id="input-three" [options]="myDatePickerOptions" formControlName="myDateThree" (dateChanged)="onDateChanged($event)">
</my-date-picker>
<my-date-picker id="input-four" [options]="myDatePickerOptions" formControlName="myDateFour" (dateChanged)="onDateChanged($event)">
</my-date-picker>
</form>
Угловой код:
import {
Component,
OnInit
} from '@angular/core';
import {
IMyOptions
} from 'mydatepicker';
import {
FormGroup,
FormBuilder,
Validators
} from '@angular/forms';
@Component({
selector: 'app-application-detail',
templateUrl: './application-detail.component.html',
styleUrls: ['./application-detail.component.css']
})
export class ApplicationDetailComponent implements OnInit {
private checkData: Object;
private myForm: FormGroup;
private myDatePickerOptions: IMyOptions = {
// other options...
dateFormat: 'dd.mm.yyyy',
};
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.checkData = {
a: new Date(),
b: new Date(),
c: new Date(),
d: new Date(),
e: new Date()
}
this.myForm = this.formBuilder.group({
myDateZero: ['', Validators.required],
myDateOne: ['', Validators.required],
myDateTwo: ['', Validators.required],
myDateThree: ['', Validators.required],
myDateFour: ['', Validators.required]
// other controls are here...
});
}
onDateChanged(ev) {
// You will be able to check the changed dates here.
console.log(ev);
}
setDate(): void {
// Set today date using the setValue function
let date = new Date();
this.myForm.setValue({
myDateOne: {
date: {
year: date.getFullYear(),
month: date.getMonth() + 1,
day: date.getDate()
}
}
});
}
clearDate(): void {
// Clear the date using the setValue function
this.myForm.setValue({
myDate: ''
});
}
}
8 ответов
Некоторые Почтовые клиенты разделят раздел <head>, таким образом, поместит Ваш <стиль> </стиль> теги в <тело>.
Поддержка CSS в электронном письме очень ограничена, по крайней мере. Самая большая проблема - то, что различные клиенты поддерживают различные наборы свойств CSS.
Вы предоставляете очень мало контекста нам для работы с.
- Как Ваша электронная почта показывает? Разве CSS не анализируется вообще? Ваш CSS показывает на экране как текст?
- Как Ваш CSS смотрит?
- Как Ваша электронная почта обрабатывает взгляд по шаблону?
Для получения дополнительной информации о поддержке CSS в электронном письме обратитесь к этому превосходному обзору.
Я предполагаю, что у Вас есть свой CSS во внешнем файле, раз так самое легкое решение состояло бы в том, чтобы просто переместить его в заголовок HTML в почте.
Однако поддержка CSS в почтовых клиентах очень wonky, таким образом, это мог бы просто быть дрянной рендеринг с их стороны.
Вот действительно хорошая статья SitePoint об электронных письмах HTML, "Как Кодировать Электронные новостные рассылки HTML".
Я нашел лучшее (читайте самый широкий), поддержка CSS встроена (стиль = ""). Печальный, но верный.
Как на Вашу таблицу стилей ссылаются?
Для электронной почты необходимо будет или предоставить полный путь таблице стилей или включать стили в главу шаблона
Есть способ...
$body = <<< YOUR_HTML_WITH_CSS_STYLE_TAGS
<html>
<head>
<style>
body * {width:1px;}
#adiv {padding:2px;}
.aclass {margin:3px;}
</style>
</head>
<body>
<div>
some html
</div>
<div id="adiv">
<p class="aclass">
</p>
</div>
</body>
</html>
YOUR_HTML_WITH_CSS_STYLE_TAGS;
$doc = new DOMDocument();
@$doc->loadHTML($body);
$xpd = new DOMXPath($doc);
0&&$node = new DOMElement();
$result = $xpd->query('//img');
foreach($result as $node){
$attr = $node->getAttribute('src');
$re = '/(http:\/\/.*?)?(\/.*+)/i';
if(preg_match_all($re, $attr, $matches)){
if(!empty($matches[1][0])&&0)
continue;
$attr = 'http://'.$_SERVER['HTTP_HOST'].$matches[2][0];
}
$node->setAttribute('src',$attr);
}
false&&$node=new DOMElement()&&$child=new DOMElement();
$result = $xpd->query('//style/..');
foreach($result as $node){
foreach($node->childNodes as $child){
if(strtolower($child->nodeName)=='style'){
$node->removeChild($child);
$css = $child->textContent;
$re = '/(.*?)\{([^}]+)\}/';
if(preg_match_all($re, $css, $matches)){
foreach($matches[1] as $idx=>$css_selector){
$css_text = $matches[2][$idx];
$css_text = preg_replace('/\s+/',' ',$css_text);
$css = new CSSQuery($doc);
foreach($css->query($css_selector) as $selected_node){
$style = $selected_node->getAttribute('style');
$selected_node->setAttribute('style', $style?$css_text:$style.';'.$css_text);
}
}
}
}
}
}
$body = $doc->saveHTML();
Этот код сгенерирует HTML-вывод в $body следующим образом:
<html>
<head>
</head>
<body>
<div style="width:1px;">
some html
</div>
<div id="adiv" style="width:1px;padding:2px;">
<p class="aclass" style="width:1px;margin:3px;">
</p>
</div>
</body>
</html>
Класс CSSQuery можно найти по адресу phpclasses.org.
Эта реализация основана на том факте, что большинство веб-почт позволяют добавлять стиль только по стилю атрибута inline тега, а не через теги стилей или теги ссылок.
Это довольно ограничено и с ограниченным синтаксисом из-за регулярного выражения, это вроде как просто, но все же лучше, чем писать своими собственными атрибутами стиля inline в каждом HTML теге.
HTML и CSS чреваты болью и разочарованием. Ничто, чтобы сделать с PHP, очевидно, что большинство реализаций coughoutlookcough было и остается архаичным.
Это - единственная область, где я советовал бы этому (и у кого-то еще могло бы быть лучшее понимание/план*), но необходимо посмотреть на вырезание CSS и запись HTML стиля середины 90-х с <таблицей>, <шрифтом> и <час> тегами (о, мой)
** совместно используйте :)*