Mail Template, diferit

Limbaje de Programare PHP
1

Salut, folosesc vue2-EditorHtml pentru a face niste template-uri pt mail, totul functioneaza in parametrii cu exceptia unui singur lucru, centrarea nu este in pagina, si nici fontul cred…
Cum arata textul in editor: https://i.imgur.com/drUx9NM.png
Cum arata textul in mail: https://i.imgur.com/YbTDpOh.png
Ignorati spatiul mare la a2-a imagine dupa “faci”, am cenzurat eu.
Sa traiti.

2


1 Like
3

Eu nu cred că vei putea folosi un editor WYSIWYG pentru editare de e-mail-uri. Pur și simplu sunt atât de multe „chichițe” când vine vorba de afișarea corectă în multitudinea de combinații hardware+software/client încât tot va trebui să faci manual multe corecturi.

1 Like
4

Poti folosi, doar ca ideal ar fi sa se bazeze pe MJML sau Foundation framework.

Grapes pare foarte fainut.

5

Tot n-am reusit… Sunt importate acele fisiere dar degeaba.

6

Ce output primesti in html ?

7

Unde in html si despre ce output ca nu inteleg…

8

Sunt foarte multe site-uri pe net care au template-uri de email gratuite si gandite de la inceput sa fie compatibile cu majoritatea clientilor de e-mail.
Cauta un astfel de template care sa fie cat mai apropiat de ce ai tu nevoie si refoloseste de acolo structura.

9

Ce output primesti de la vue2-Editor cand introduci text si il stilizezi. Mai sus mi-ai aratat textul in editor si in mail, textul din mail il vreau in format html. Evident, dupa ce ai setat Quill sa foloseasca inline styling.

Ti-am facut un pen: https://codepen.io/ZsharE/pen/WNQwJGd
Output-ul in loc sa-l afisezi cum am facut eu, il introduci in body-ul de mail (computed).

10

La textul pe care l-am pus aici in editor, asta este codul html:

<h1 class="ql-align-center">Salut fratelo, ce mai faci {{ name }}?</h1><p class="ql-align-center"><span style="background-color: rgb(0, 102, 204); color: rgb(230, 0, 0);">das</span></p><p class="ql-align-center"><u style="color: rgb(153, 51, 255);">Testare blanaoooooo!!!</u></p><h1 class="ql-align-center"><br></h1><h1><br></h1><h1><br></h1><h1><br></h1>
11

Sterge importurile care iti genereaza clase. Vezi exemplul meu, ai acolo tot.

<h1 style="text-align: center;">Quill heading</h1>

Doar de astea ai nevoie:

var AlignStyle = Quill.import('attributors/style/align');
var BackgroundStyle = Quill.import('attributors/style/background');
var ColorStyle = Quill.import('attributors/style/color');
var DirectionStyle = Quill.import('attributors/style/direction');
var FontStyle = Quill.import('attributors/style/font');
var SizeStyle = Quill.import('attributors/style/size');
1 Like
12

Ok, in Quill.js am astea:

import Quill from './core';

import { AlignClass, AlignStyle } from './formats/align';
import { DirectionAttribute, DirectionClass, DirectionStyle } from './formats/direction';
import { IndentClass as Indent } from './formats/indent';

import Blockquote from './formats/blockquote';
import Header from './formats/header';
import List, { ListItem } from './formats/list';

import { BackgroundClass, BackgroundStyle } from './formats/background';
import { ColorClass, ColorStyle } from './formats/color';
import { FontClass, FontStyle } from './formats/font';
import { SizeClass, SizeStyle } from './formats/size';

import Bold from './formats/bold';
import Italic from './formats/italic';
import Link from './formats/link';
import Script from './formats/script';
import Strike from './formats/strike';
import Underline from './formats/underline';

import Image from './formats/image';
import Video from './formats/video';

import CodeBlock, { Code as InlineCode } from './formats/code';

import Formula from './modules/formula';
import Syntax from './modules/syntax';
import Toolbar from './modules/toolbar';

import Icons from './ui/icons';
import Picker from './ui/picker';
import ColorPicker from './ui/color-picker';
import IconPicker from './ui/icon-picker';
import Tooltip from './ui/tooltip';

import BubbleTheme from './themes/bubble';
import SnowTheme from './themes/snow';


Quill.register({
  'attributors/attribute/direction': DirectionAttribute,

  'attributors/class/align': AlignClass,
  'attributors/class/background': BackgroundClass,
  'attributors/class/color': ColorClass,
  'attributors/class/direction': DirectionClass,
  'attributors/class/font': FontClass,
  'attributors/class/size': SizeClass,

  'attributors/style/align': AlignStyle,
  'attributors/style/background': BackgroundStyle,
  'attributors/style/color': ColorStyle,
  'attributors/style/direction': DirectionStyle,
  'attributors/style/font': FontStyle,
  'attributors/style/size': SizeStyle
}, true);


Quill.register({
  'formats/align': AlignClass,
  'formats/direction': DirectionClass,
  'formats/indent': Indent,

  'formats/background': BackgroundStyle,
  'formats/color': ColorStyle,
  'formats/font': FontClass,
  'formats/size': SizeClass,

  'formats/blockquote': Blockquote,
  'formats/code-block': CodeBlock,
  'formats/header': Header,
  'formats/list': List,

  'formats/bold': Bold,
  'formats/code': InlineCode,
  'formats/italic': Italic,
  'formats/link': Link,
  'formats/script': Script,
  'formats/strike': Strike,
  'formats/underline': Underline,

  'formats/image': Image,
  'formats/video': Video,

  'formats/list/item': ListItem,

  'modules/formula': Formula,
  'modules/syntax': Syntax,
  'modules/toolbar': Toolbar,

  'themes/bubble': BubbleTheme,
  'themes/snow': SnowTheme,

  'ui/icons': Icons,
  'ui/picker': Picker,
  'ui/icon-picker': IconPicker,
  'ui/color-picker': ColorPicker,
  'ui/tooltip': Tooltip
}, true);


export default Quill;

Sterg de aici ce nu-i nevoie legat de class/attributors si o sa las doar ce mi-ai trimis, tu sper sa mearga.
Merci fain.