Full featured demo: Non-Premium Plugins only

This example includes only non-premium plugins. These plugins are also used in the Full featured demo: Including Premium Plugins.

  • TinyMCE

  • HTML

  • CSS

  • JS

  • Edit on CodePen

<textarea id="open-source-plugins">
  <h1 style="text-align: left;">Welcome to the TinyMCE editor demo!</h1>
  <p>Meet <strong>TinyMCE, </strong>the Internet's most&nbsp;<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>,&nbsp;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&amp;utm_source=site&amp;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&amp;utm_source=site&amp;keyword=docs">@Mentions</a>, <a href="https://www.tiny.cloud/docs/tinymce/latest/introduction-to-tiny-comments/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">discuss using Comments</a> and review changes using <a href="https://www.tiny.cloud/docs/tinymce/latest/suggestededits/?utm_campaign=tiny_docs&amp;utm_source=site&amp;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&amp;utm_source=site&amp;keyword=docs">Revision history</a>.</li>
  <li><a href="https://www.tiny.cloud/docs/tinymce/latest/introduction-to-powerpaste/?utm_campaign=tiny_docs&amp;utm_source=site&amp;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&amp;utm_source=site&amp;keyword=docs">import Word documents</a>!&nbsp;</li>
  <li>Power your email editor with <a href="https://www.tiny.cloud/docs/tinymce/latest/mergetags/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Merge tags</a> and <a href="https://www.tiny.cloud/docs/tinymce/latest/inline-css/?utm_campaign=tiny_docs&amp;utm_source=site&amp;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&amp;utm_source=site&amp;keyword=docs">Spell Checker</a>, <a href="https://www.tiny.cloud/docs/tinymce/latest/a11ychecker/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Accessibility Checker</a>, <a href="https://www.tiny.cloud/docs/tinymce/latest/advanced-typography/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Advanced Typography</a> and <a href="https://www.tiny.cloud/docs/tinymce/latest/linkchecker/?utm_campaign=tiny_docs&amp;utm_source=site&amp;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" style="color: #2c3e50;"><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&amp;utm_source=site&amp;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&amp;utm_source=site&amp;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&amp;utm_source=site&amp;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&rsquo;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&mdash;or embedding it in SaaS platforms or internal tools&mdash;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&amp;utm_source=site&amp;keyword=docs">Go build something today</a></p>
</textarea>
/* For other boilerplate styles, see: https://www.tiny.cloud/docs/tinymce/8/editor-content-css/ */
/*
* For rendering images inserted using the image plugin.
* Includes image captions using the HTML5 figure element.
*/

figure.image {
  display: inline-block;
  border: 1px solid gray;
  margin: 0 2px 0 1px;
  background: #f5f2f0;
}

figure.align-left {
  float: left;
}

figure.align-right {
  float: right;
}

figure.image img {
  margin: 8px 8px 0 8px;
}

figure.image figcaption {
  margin: 6px 8px 6px 8px;
  text-align: center;
}

/*
 Alignment using classes rather than inline styles
 check out the "formats" option
*/

img.align-left {
  float: left;
}

img.align-right {
  float: right;
}

/* Basic styles for Table of Contents plugin (tableofcontents) */
.mce-toc {
  border: 1px solid gray;
}

.mce-toc h2 {
  margin: 4px;
}

.mce-toc li {
  list-style-type: none;
}
const useDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
const isSmallScreen = window.matchMedia('(max-width: 1023.5px)').matches;

tinymce.init({
  selector: 'textarea#open-source-plugins',
  plugins: [
    'accordion', 'advlist', 'anchor', 'autolink', 'autoresize', 'autosave', 'charmap', 'code',
    'codesample', 'directionality', 'emoticons', 'fullscreen', 'help', 'image',
    'importcss', 'insertdatetime', 'link', 'lists', 'media',
    'nonbreaking', 'pagebreak', 'preview', 'quickbars', 'save', 'searchreplace',
    'table', 'visualblocks', 'visualchars', 'wordcount',
    /* Premium plugins for demo purposes only */
    'mediaembed',
  ],
  editimage_cors_hosts: ['picsum.photos'],
  menubar: 'file edit view insert format tools table help',
  toolbar: "undo redo | accordion accordionremove | blocks fontfamily fontsize | bold italic underline strikethrough | align numlist bullist | link image | table media | lineheight outdent indent| forecolor backcolor removeformat | charmap emoticons | code fullscreen preview | save print | pagebreak anchor codesample | ltr rtl",
  autosave_ask_before_unload: true,
  autosave_interval: '30s',
  autosave_prefix: '{path}{query}-{id}-',
  autosave_restore_when_empty: false,
  autosave_retention: '2m',
  image_advtab: true,
  link_list: [
    { title: 'My page 1', value: 'https://www.tiny.cloud' },
    { title: 'My page 2', value: 'http://www.moxiecode.com' }
  ],
  image_list: [
    { title: 'My page 1', value: 'https://www.tiny.cloud' },
    { title: 'My page 2', value: 'http://www.moxiecode.com' }
  ],
  image_class_list: [
    { title: 'None', value: '' },
    { title: 'Some class', value: 'class-name' }
  ],
  importcss_append: true,
  file_picker_callback: (callback, value, meta) => {
    /* Provide file and text for the link dialog */
    if (meta.filetype === 'file') {
      callback('https://www.google.com/logos/google.jpg', { text: 'My text' });
    }

    /* Provide image and alt text for the image dialog */
    if (meta.filetype === 'image') {
      callback('https://www.google.com/logos/google.jpg', { alt: 'My alt text' });
    }

    /* Provide alternative source and posted for the media dialog */
    if (meta.filetype === 'media') {
      callback('movie.mp4', { source2: 'alt.ogg', poster: 'https://www.google.com/logos/google.jpg' });
    }
  },
  height: 600,
  image_caption: true,
  quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
  noneditable_class: 'mceNonEditable',
  toolbar_mode: 'sliding',
  contextmenu: 'link image table',
  skin: useDarkMode ? 'oxide-dark' : 'oxide',
  content_css: useDarkMode ? 'dark' : 'default',
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

The following plugins are excluded from this example:

Excluded plugins Notes

All premium plugins.

Use the Full featured demo including Premium Plugins

Autoresize

Resizes the editor to fit the content.