Using the TinyMCE .zip package with the Web Component

The Official TinyMCE Web Component integrates TinyMCE into Web Component projects. This procedure creates an HTML page containing a TinyMCE editor.

Procedure

To add a TinyMCE editor to a web page using the TinyMCE Web Component:

  1. Add the following meta tags to the head section of the page:

      <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

    The second meta element is required for the editor to function correctly on mobile devices. For information on the viewport meta element, see: MDN Web Docs - Using the viewport meta tag to control layout on mobile browsers.

  2. Add a script element sourcing the TinyMCE Web Component (tinymce-webcomponent.min.js), such as:

    <script src="https://cdn.jsdelivr.net/npm/@tinymce/tinymce-webcomponent/dist/tinymce-webcomponent.min.js"></script>

    The tinymce-webcomponent can also be sourced from npmjs.

  3. Add a script element sourcing TinyMCE, such as:

    <script src="/path/to/tinymce.min.js"></script>

    If a script element sourcing TinyMCE is not provided, the TinyMCE Web Component will load TinyMCE from the Tiny Cloud. For information on the available options for sourcing TinyMCE, see: Loading TinyMCE.

  4. Add a tinymce-editor element where the editor should appear.

    <tinymce-editor license-key="your-license-key"></tinymce-editor>

    The default TinyMCE editor will load at this location if the page is opened in a web browser.

  5. Update the license-key option in the editor element and include your License Key.

Next Steps