Using the TinyMCE 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 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:

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

    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 the tinymce and tinymce-webcomponent packages, such as:

    npm install tinymce @tinymce/tinymce-webcomponent

  4. Bundle TinyMCE with the Web Component application using a module loader (such as Webpack).

    Tiny does not recommend bundling tinymce and tinymce-webcomponent with a module loader. Bundling these packages can be complex and error prone.

    To bundle TinyMCE using a module loader (such as Webpack, Rollup, or Browserify), import or require the tinymce package, followed by the tinymce-webcomponent package, then the other required TinyMCE-related imports.

    Example of bundling:

    /* Add the tinymce-webcomponent wrapper to the bundle */
import { Editor } from '@tinymce/tinymce-webcomponent';
/* For instructions on bundling TinyMCE, see the Bundling TinyMCE documentation. */

    For instructions on bundling TinyMCE, see: Bundling TinyMCE.

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

    <script src="/path/to/bundle.js"></script>

    If a script element sourcing TinyMCE is not provided, the TinyMCE Web Component will load TinyMCE from the Tiny Cloud.

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

    <tinymce-editor></tinymce-editor>

    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>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>

    <!--
      Adding the `tinymce-editor` element with various options set as attributes.
    -->
    <tinymce-editor
      api-key="no-api-key"
      height="500"
      menubar="false"
      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"
      content_style="body
      {
        font-family:Helvetica,Arial,sans-serif;
        font-size:14px
      }"
      >

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

    </tinymce-editor>

    <!--
      Sourcing the `tinymce-webcomponent` from jsDelivr,
      which sources TinyMCE from the Tiny Cloud.
    -->
    <script src="https://cdn.jsdelivr.net/npm/@tinymce/tinymce-webcomponent@2/dist/tinymce-webcomponent.min.js"></script>

  </body>
</html>
/*
No Javascript is required for this configuration.
*/

Next Steps