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

    npm install tinymce @tinymce/tinymce-webcomponent

  3. (Optional) For premium plugins, install the tinymce-premium package:

    npm install tinymce-premium@^8.3

    For more information, see: Installing premium plugins.

  4. Add a script element sourcing the output file, 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.

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

    <script>
  var editorConfig= {
    license_key: 'gpl'
  }
</script>
<tinymce-editor config="editorConfig"></tinymce-editor>

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

Next Steps