5cf3da1488
✨ feat(newsletter): Ajoute l'éditeur de template d'email avec Preact
Crée un nouvel éditeur de template d'email en utilisant Preact et
react-email-editor, et l'intègre au contrôleur et aux vues.
```
39 lines
1.1 KiB
JavaScript
39 lines
1.1 KiB
JavaScript
import EmailEditor, { EditorRef, EmailEditorProps } from 'react-email-editor';
|
|
import { useRef } from 'preact/hooks';
|
|
|
|
export function MainframeEmailEditor() {
|
|
const emailEditorRef = useRef(null);
|
|
|
|
const exportHtml = (e) => {
|
|
e.preventDefault();
|
|
const unlayer = emailEditorRef.current?.editor;
|
|
|
|
unlayer?.exportHtml((data) => {
|
|
const { design, html } = data;
|
|
|
|
let format = JSON.stringify({
|
|
design,
|
|
html
|
|
})
|
|
document.body.querySelector('#template_content').setAttribute('value',format);
|
|
document.body.querySelector('#template_content').value = format;
|
|
});
|
|
};
|
|
const onReady =(unlayer) => {
|
|
let html = document.body.querySelector('#template_content').getAttribute('value');
|
|
let data = JSON.parse(html);
|
|
unlayer.loadDesign(data.design);
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
<div>
|
|
<div>
|
|
<button class="button" onClick={exportHtml}>Sauvegarde le html</button>
|
|
</div>
|
|
<EmailEditor locale="fr-FR" ref={emailEditorRef} onReady={onReady} />
|
|
</div>
|
|
);
|
|
}
|