I want to initialize more than one editor on same page

[aditya-dikonia]

I'm facing the issue when i append the editor second time on page then editor append in first editor div Can any help me out how i can initialize multiple editor without merging with each other Thanks

[diegocabrito]

This not work for me, anyone with same problem? Any solution?

[xantos008]

Guys! It is possible, i did it @cabrahost

[xantos008]

I have used this on language multi email templates

[xantos008]

Sample, hope this will helps

const emailEditorRef = useRef([null]);
const [inviteTemplates, setInviteTemplates] = useState({
    items: [0, 1] // As many items in array as many editors you will get
    // Also you can use setInviteTemplates for dynamic 
})

useEffect(() => {
    emailEditorRef.current = emailEditorRef.current.slice(0, inviteTemplates.items.length);
    console.log('emailEditorRef', emailEditorRef)
}, [inviteTemplates.items]);


const loadEditorEmail = (index) => {
    if(emailEditorRef && emailEditorRef.current && emailEditorRef.current[index] && emailEditorRef.current[index].editor){
        emailEditorRef.current[index].editor.addEventListener('design:updated', (data) => {
            emailEditorRef.current[index].editor.exportHtml((data) => {
                const { design, html } = data;
                //Your code ...
            });
        });
    } else {
        //Your code ...
    }
}

//This goes in your render function
{inviteTemplates.items.map((item, i) => (
    <div key={i}>
        <Editor
            key={i}
            ref={el => emailEditorRef.current[i] = el}
            onLoad={() => loadEditorEmail(i)}
        />
    </div>
))}