Open brennanleez-coder opened 5 months ago
As working in React, unlayer means => emailEditorRef.current.editor (ref hook) Document Link: https://docs.unlayer.com/docs/react-component
import React, { useRef } from 'react';
import EmailEditor from 'react-email-editor';
const App = () => {
const emailEditorRef = useRef(null);
const exportHtml = () => {
emailEditorRef.current.editor.exportHtml((data) => {
const { html } = data;
console.log('exportHtml', html);
});
};
const onReady = () => {
console.log('Editor is ready');
// Load your template here
const templateJson = {}; // Your Template JSON
emailEditorRef.current.editor.loadDesign(templateJson);
};
return (
<div>
<div>
<button onClick={exportHtml}>Export HTML</button>
</div>
<EmailEditor
ref={emailEditorRef}
onReady={onReady}
/>
</div>
);
};
export default App;
That approach doesn't work for calling the init function.
The init function doesn't exist on emailEditorRef.current.editor. I need to call init to set up things like mergeTags, how do I do this in React?
For merge tag you can either hardcode it inside Editor components in options or while initializing the editor connect it with some kind of dataset to load it.
<EmailEditor ref={emailEditorRef} onReady={onReady} options={{ mergeTags: { first_name: { name: "First Name", value: "{{first_name}}", }, } }} />
Hi everyone, where do i run the unlayer.init method.
I am trying to get the editor to load from a template hence I need this setup.