<main>
<textarea id="editor">
<h1 style="text-align: center;">What’s your Document Management editing project? </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’s both? Then use the only WYSIWYG editor that’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 linkchecker emoticons advtable export print autosave a11ychecker",
toolbar:
"undo redo print spellcheckdialog formatpainter | blocks fontfamily fontsize | bold italic underline forecolor backcolor | link image | alignleft aligncenter alignright alignjustify lineheight pagebreak tableofcontents | checklist bullist numlist indent outdent | removeformat | spellchecker language | a11ycheck ",
height: "700px",
toolbar_sticky: true,
icons: "thin",
//DMS Productivity
//PowerPaste
powerpaste_word_import: "clean",
powerpaste_googledocs_import: "clean",
powerpaste_html_import: "clean",
//Spellchecker Pro
spellchecker_active: true,
spellchecker_language: "en_US",
spellchecker_languages:
"English (United States)=en_US,English (United Kingdom)=en_GB,Danish=da,French=fr,German=de,Italian=it,Polish=pl,Spanish=es,Swedish=sv",
//Autosave
autosave_restore_when_empty: true,
autosave_interval: "30s",
//Accessibility Checker
a11ychecker_html_version: "html5",
a11ychecker_level: "aaa",
//DMS - Layout
//Pagebreak
pagebreak_separator: '<div class="break"></div>',
//Table of Contents
tableofcontents_depth: 4,
//Styling for the editor
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
}
}
`
});
External CSS
This Pen doesn't use any external CSS resources.