Using TinyMCE from the Tiny Cloud CDN 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 tinymce-editor element where the editor should appear and include your Tiny Cloud API key from Tiny Account.


    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