Untitled

import { Container } from '@mui/material';
import dynamic from 'next/dynamic';
import React, { useRef } from 'react';
import tinymce from 'tinymce';

const DynamicEditor = dynamic(
    () => import('src/components/editor/BundledEditor'),
    {
        loading: () => <p>Loading...</p>,
    }
);

const DynamicEditor1 = dynamic(
    () => import('src/components/editor/BundledEditor'),
    {
        loading: () => <p>Loading...</p>,
    }
);

export default function Editor() {
    const editorRef = useRef(null);
    const log = () => {
        if (editorRef.current) {
            console.log(editorRef.current.getContent());
        }
    };
    return (
        <Container maxWidth={false} sx={{ marginTop: 4 }}>
            <DynamicEditor
                onInit={(evt, editor) => (editorRef.current = editor)}
                initialValue="<p>This is the initial content of the editor.</p>"
                init={{
                    height: 500,
                    menubar: false,
                    plugins: [
                        'advlist',
                        'anchor',
                        'autolink',
                        'help',
                        'image',
                        'link',
                        'lists',
                        'searchreplace',
                        'table',
                        'wordcount',
                        'code',
                        'preview',
                        'quickbars',
                        'my-example-plugin',
                    ],
                    quickbars_insert_toolbar: false,
                    toolbar:
                        'undo redo | fontsize | fontfamily ' +
                        'bold italic underline forecolor backcolor| alignleft aligncenter ' +
                        'alignright alignjustify | bullist numlist outdent indent | ' +
                        'removeformat | code | preview id = "preview-button" | help',
                    content_style:
                        'body { font-family:Verdana; font-size:12px }',
                    selector: 'textarea#contextmenu-section',
                    contextmenu: 'image',
                }}
            />
            <DynamicEditor1
                onInit={(evt, editor) => (editorRef.current = editor)}
                initialValue="<p>This is the initial content of the editor.</p>"
                init={{
                    height: 500,
                    menubar: false,
                    plugins: [
                        'advlist',
                        'anchor',
                        'autolink',
                        'help',
                        'image',
                        'link',
                        'lists',
                        'searchreplace',
                        'table',
                        'wordcount',
                        'code',
                        'preview',
                        'quickbars',
                    ],
                    quickbars_insert_toolbar: true,
                    toolbar:
                        'undo redo | fontsize | fontfamily ' +
                        'bold italic underline forecolor backcolor| alignleft aligncenter ' +
                        'alignright alignjustify | bullist numlist outdent indent | ' +
                        'removeformat | code | preview | help',
                    content_style:
                        'body { font-family:Verdana; font-size:12px }',
                }}
            />
            <button onClick={log}>Log editor content</button>
        </Container>
    );
}