Basic example
Interactive example
This example contains the plugins needed for the most common use cases.
-
TinyMCE
-
HTML
-
JS
-
Edit on CodePen
<textarea id="basic-example">
<h1 style="text-align: left;">Welcome to the TinyMCE editor demo!</h1>
<p>Meet <strong>TinyMCE, </strong>the Internet's most <span style="background-color: #eccafa;">battle-tested rich text editor</span> with over 60 features including: <em>Advanced formatting, </em><span style="color: #ba372a;"><strong><em>Export to and from Word and PDF, </em></strong></span><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Accessibility and spelling checkers</span>, Mentions and comments, and <strong><span style="color: #169179;">an AI assistant</span></strong>.</p>
<p><span style="font-family: terminal, monaco, monospace;">TinyMCE is easy to implement and configure</span>. <a href="https://www.tiny.cloud/auth/signup/?utm_campaign=tiny_docs&utm_source=site&keyword=docs">Try it out yourself today</a>.</p>
<h2>⭐️ Popular features (including paid subscription plugins)</h2>
<ul>
<li>Collaborate with <a href="https://www.tiny.cloud/docs/tinymce/latest/mentions/?utm_campaign=tiny_docs&utm_source=site&keyword=docs">@Mentions</a>, <a href="https://www.tiny.cloud/docs/tinymce/latest/introduction-to-tiny-comments/?utm_campaign=tiny_docs&utm_source=site&keyword=docs">discuss using Comments</a> and review changes using <a href="https://www.tiny.cloud/docs/tinymce/latest/suggestededits/?utm_campaign=tiny_docs&utm_source=site&keyword=docs">Suggested Edits</a> and keep an audit trail with <a href="https://www.tiny.cloud/docs/tinymce/latest/revisionhistory/?utm_campaign=tiny_docs&utm_source=site&keyword=docs">Revision history</a>.</li>
<li><a href="https://www.tiny.cloud/docs/tinymce/latest/introduction-to-powerpaste/?utm_campaign=tiny_docs&utm_source=site&keyword=docs">Paste from MS Word</a> and retain formatting. You can even <a href="https://www.tiny.cloud/docs/tinymce/latest/importword/?utm_campaign=tiny_docs&utm_source=site&keyword=docs">import Word documents</a>! </li>
<li>Power your email editor with <a href="https://www.tiny.cloud/docs/tinymce/latest/mergetags/?utm_campaign=tiny_docs&utm_source=site&keyword=docs">Merge tags</a> and <a href="https://www.tiny.cloud/docs/tinymce/latest/inline-css/?utm_campaign=tiny_docs&utm_source=site&keyword=docs">Inline CSS output</a>.</li>
<li>Hit the highest standards with <a href="https://www.tiny.cloud/docs/tinymce/latest/introduction-to-tiny-spellchecker/?utm_campaign=tiny_docs&utm_source=site&keyword=docs">Spell Checker</a>, <a href="https://www.tiny.cloud/docs/tinymce/latest/a11ychecker/?utm_campaign=tiny_docs&utm_source=site&keyword=docs">Accessibility Checker</a>, <a href="https://www.tiny.cloud/docs/tinymce/latest/advanced-typography/?utm_campaign=tiny_docs&utm_source=site&keyword=docs">Advanced Typography</a> and <a href="https://www.tiny.cloud/docs/tinymce/latest/linkchecker/?utm_campaign=tiny_docs&utm_source=site&keyword=docs">Link Checker</a>.</li>
</ul>
<p><iframe src="https://www.youtube.com/embed/YpcfDYYWmK0" width="560" height="314" allowfullscreen="allowfullscreen"></iframe></p>
<h2>🖖 Get TinyMCE</h2>
<table style="border-collapse: collapse; width: 100%; height: 143.125px;" border="1"><colgroup><col style="width: 33.306581%;"><col style="width: 33.306581%;"><col style="width: 33.306581%;"></colgroup>
<thead>
<tr style="height: 35.78125px; background-color: #ecf0f1; text-align: center;">
<td colspan="3"><strong>TinyMCE meets all your architecture requirements.</strong></td>
</tr>
</thead>
<tbody>
<tr style="height: 35.78125px;">
<td><strong>Cloud</strong></td>
<td><a href="https://www.tiny.cloud/auth/signup/?utm_campaign=tiny_docs&utm_source=site&keyword=docs">Sign-up for free</a></td>
<td>Always up to date, easy to maintain</td>
</tr>
<tr style="height: 35.78125px;">
<td><strong>Self-hosted</strong></td>
<td><a href="https://www.tiny.cloud/pricing/?utm_campaign=tiny_docs&utm_source=site&keyword=docs">Let's talk</a></td>
<td>With enterprise level support</td>
</tr>
<tr style="height: 35.78125px;">
<td><strong>Open source</strong></td>
<td><a href="https://github.com/tinymce/tinymce?utm_campaign=tiny_docs&utm_source=site&keyword=docs">Download today</a></td>
<td>Available under the GPLv2+ license</td>
</tr>
</tbody>
</table>
<h2>Why TinyMCE 👀</h2>
<ol>
<li><strong>Out-of-the-box features save dev time.</strong> From tables and spell checking to full collaboration and accessibility compliance, TinyMCE offers features you’d otherwise spend months building.</li>
<li><strong>Built to scale with you.</strong> TinyMCE powers applications with millions of users. Its performance, reliability, and architecture are built for scale, from early MVPs to global platforms.</li>
<li><strong>Works where you build.</strong> Whether you're using React, Vue, Angular, or vanilla JavaScript—or embedding it in SaaS platforms or internal tools—TinyMCE integrates smoothly into your stack.</li>
<li><strong>No one has been doing this longer.</strong> You benefit from 20+ years of stability, security, feature, accessibility, documentation improvements, and enterprise support services.</li>
</ol>
<p style="text-align: center;">❤️ <a href="https://www.tiny.cloud/auth/signup/?utm_campaign=tiny_docs&utm_source=site&keyword=docs">Go build something today</a></p>
</textarea>tinymce.init({
selector: 'textarea#basic-example',
height: 500,
plugins: [
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
'insertdatetime', 'media', 'table', 'help', 'wordcount',
/* Premium plugins for demo purposes only */
'mediaembed',
],
toolbar: 'undo redo | blocks | ' +
'bold italic backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | help',
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});