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

  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.

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

Next Steps