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.


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

  1. Add the DOCTYPE element to the target page, such as:

    <!DOCTYPE html>

    The DOCTYPE declaration is required for the editor to function correctly.

  2. Add the following meta elements to the head of 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.

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

    <script src=""></script>

    The tinymce-webcomponent can also be sourced from npmjs.

  4. 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.

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


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

Example: adding the TinyMCE Web Component to an HTML page

The following example shows the TinyMCE Web Component in an HTML page, with:

  • Various TinyMCE configuration options set using attributes.

  • TinyMCE sourced from the Tiny Cloud.

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<p>Welcome to the TinyMCE Web Component example!</p>
<!DOCTYPE html>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

      Adding the `tinymce-editor` element with various options set as attributes.
      plugins="advlist autolink lists link image charmap preview anchor
        searchreplace visualblocks code fullscreen
        insertdatetime media table code help wordcount"
      toolbar="undo redo | blocks | bold italic backcolor |
        alignleft aligncenter alignright alignjustify |
        bullist numlist outdent indent | removeformat | help"

      <!-- Adding some initial editor content -->
      &lt;p&gt;Welcome to the TinyMCE Web Component example!&lt;/p&gt;


      Sourcing the `tinymce-webcomponent` from jsDelivr,
      which sources TinyMCE from the Tiny Cloud.
    <script src=""></script>

No Javascript is required for this configuration.

Next Steps