<main>
    <textarea id="editor">
        <h1 style="text-align: center;">What&rsquo;s your Document Management editing project?&nbsp;</h1>
        <p style="text-align: center;">Are you:</p>
        <table style="border-collapse: collapse; width: 100%;" border="1">
            <colgroup>
                <col style="width: 50%;">
                <col style="width: 50%;">
            </colgroup>
            <tbody>
                <tr>
                    <td style="text-align: center;"><strong><span style="font-size: 36pt;">📝</span><br><br>Building a next-generation document creation solution</strong> and want to offer the best rich text editing experience to your content creators?</td>
                    <td>
                        <p style="text-align: center;"><span style="font-size: 36pt;"><strong>🗂️</strong></span></p>
                        <p style="text-align: center;"><strong>Developing an innovative documentation system</strong> to organize, track, store, and share documents, and you want to add editing capabilities?</p>
                    </td>
                </tr>
            </tbody>
        </table>
        <p style="text-align: center;">Or perhaps it&rsquo;s both? Then use the only WYSIWYG editor that&rsquo;s trusted by <a href="https://tiny.cloud" target="_blank" rel="noopener">1.5M developers</a>.</p>
        <h3>Curious about TinyMCE?</h3>
        <p>Play with this demo to see how TinyMCE works! Try out these popular document creation functions:</p>
        <ul class="tox-checklist">
            <li class="tox-checklist--checked">Copy complex rich content from another app into the editor</li>
            <li>Add or resolve a comment</li>
            <li>Drag-and-drop an image from your computer, then edit it within TinyMCE</li>
            <li>Any other functionality that you would expect in a document editor!</li>
        </ul>
    </textarea>
</main>

body {
     margin: 4rem auto;
     padding: 0 2rem;
     background-color: #f9f9fb;
     }
main {
     width: 100%;
     }

 tinymce.init({
            selector: "#editor",
            plugins: "powerpaste casechange searchreplace autolink directionality advcode visualblocks visualchars image link media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker editimage help formatpainter permanentpen charmap tinycomments linkchecker emoticons advtable export print autosave",
            toolbar: "undo redo print spellcheckdialog formatpainter | blocks fontfamily fontsize | bold italic underline forecolor backcolor | link image addcomment showcomments  | alignleft aligncenter alignright alignjustify lineheight | checklist bullist numlist indent outdent | removeformat",
            height: '700px',
            toolbar_sticky: true,
            icons: 'thin',
            autosave_restore_when_empty: true,
            tinycomments_mode: 'embedded',
            tinycomments_author: 'john.doe',
            tinycomments_author_name: 'John Doe',
            content_style: `
                body {
                    background: #fff;
                }

                @media (min-width: 840px) {
                    html {
                        background: #eceef4;
                        min-height: 100%;
                        padding: 0 .5rem
                    }

                    body {
                        background-color: #fff;
                        box-shadow: 0 0 4px rgba(0, 0, 0, .15);
                        box-sizing: border-box;
                        margin: 1rem auto 0;
                        max-width: 820px;
                        min-height: calc(100vh - 1rem);
                        padding:4rem 6rem 6rem 6rem
                    }
                }
             `,
 });