---
title: "TinyMCE Web Component technical reference"
description: "Technical reference for the TinyMCE Web Component"
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/index.md"
version: "latest"
last_updated: "2025-07-23T02:45:48Z"
tokens: 6085
---
# TinyMCE Web Component technical reference

**Covered in this section:**

- [Use a cloud version of the TinyMCE Web Component integration](#use-a-cloud-version-of-the-tinymce-web-component-integration)
- [Installing the TinyMCE Web Component integration](#installing-the-tinymce-web-component-integration)
- [Loading TinyMCE](#loading-tinymce)
- [Setting the license key](#licensekey)
- [Configuring the editor](#configuring-the-editor)

  - [Setting the initial content](#setting-the-initial-content)
  - [Loading plugins](#loading-plugins)
  - [Setting the editor width](#setting-the-editor-width)
  - [Setting the editor height](#setting-the-editor-height)
  - [Setting the editor to readonly](#setting-readonly)
  - [Setting the editor to disabled](#setting-disabled)
  - [Setting the toolbar](#setting-the-toolbar)
  - [Setting the toolbar mode](#setting-the-toolbar-mode)
  - [Setting the menu bar](#setting-the-menu-bar)
  - [Setting context menu](#setting-context-menu)
  - [Setting the quick-insert toolbar](#setting-the-quick-insert-toolbar)
  - [Setting the quick-selection toolbar](#setting-the-quick-selection-toolbar)
  - [Setting content stylesheets](#setting-content-stylesheets)
  - [Setting content styling](#setting-content-styling)
  - [Setting PowerPaste’s word import method](#setting-powerpastes-word-import-method)
  - [Setting PowerPaste’s html import method](#setting-powerpastes-html-import-method)
  - [Setting PowerPaste to allow local images](#setting-powerpaste-to-allow-local-images)
  - [Showing resize handles](#showing-resize-handles)
  - [Setting the editor setup function](#setting-the-editor-setup-function)
  - [Setting the editor skin](#setting-the-editor-skin)
  - [Setting the images upload URL](#setting-the-images-upload-url)
  - [Setting the images upload handler](#setting-the-images-upload-handler)
  - [Setting the images upload base path](#setting-the-images-upload-base-path)
  - [Setting the images upload to have credentials](#setting-the-images-upload-to-have-credentials)
  - [Setting the images upload to reuse filenames](#setting-the-images-upload-to-reuse-filenames)
  - [Setting the icon pack](#setting-the-icon-pack)
  - [Setting the icon pack URL](#setting-the-icon-pack-url)
  - [Setting additional configuration options](#setting-additional-configuration-options)
- [Event binding](#event-binding)

  - [Supported browser events](#supported-browser-events)
  - [Supported TinyMCE events](#supported-tinymce-events)

## Use a cloud version of the TinyMCE Web Component integration

To use a cloud version of Web Component, the integration is accessible from [JSDelivr](https://www.jsdelivr.com/package/npm/@tinymce/tinymce-webcomponent).

For example:

```html
<script src="https://cdn.jsdelivr.net/npm/@tinymce/tinymce-webcomponent/dist/tinymce-webcomponent.min.js"></script>
```

## Installing the TinyMCE Web Component integration

To add the TinyMCE Web Component integration to a JavaScript project, on command line or command prompt, run the following:

- NPM users:

```sh
npm i @tinymce/tinymce-webcomponent
```
- Yarn users:

```sh
yarn add @tinymce/tinymce-webcomponent
```

## Loading TinyMCE

The integration requires both the TinyMCE Web Component (`tinymce-webcomponent.min.js`) and TinyMCE (`tinymce.min.js`).

If TinyMCE is not available for TinyMCE Web Component, the latest version of TinyMCE will be automatically loaded from the Tiny Cloud.

To use TinyMCE Web Component with a self-hosted copy of TinyMCE, ensure that the self-hosted copy of TinyMCE can be loaded in the same location as the TinyMCE Web Component (such as the same web page).

To use TinyMCE from the Tiny Cloud, add the `api-key` attribute to the `tinymce-editor` element with an API from [Tiny Account](/my-account/).

## Setting the license key

Specifies the TinyMCE license key. Required for self-hosted deployments of TinyMCE. This property is **not required** for cloud-only deployments using the Tiny Cloud as your cloud subscription automatically includes the commercial license. For more information, see: [License Key](../license-key/).

**Type:** `String`

**Default value:** `undefined`

**Possible values:** * `undefined` - Use this when loading from Tiny Cloud with an API key
* `'gpl'` - For open source projects using GPL license
* `'T8LK:…​'` - For commercial TinyMCE installations (must use this prefix for version 8+)
* `'GPL+T8LK:'` - For open source projects that require premium features while maintaining GPL compliance.

> **Note:** In hybrid deployments (using both cloud and self-hosted features):
> 
> - You can provide both an API key and a license key
> - The editor will use cloud services when available
> - It will automatically fall back to the local license key if cloud services are not contactable

### Example: Commercial license

```html
<script>
  var editorConfig= {
    license_key: 'T8LK:...'
  }
</script>
<tinymce-editor config="editorConfig"></tinymce-editor>
```

### Example: Open source GPL license

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

> **Important:**
> - The license key is only required when self-hosting TinyMCE
> - License keys starting with "T8LK:" use client-side validation.
> - Do not use both an API key and a license key - use API key for cloud deployments, and license key for self-hosted deployments
For more information on licensing, see: [License Key](../license-key/).

## Configuring the editor

The editor is configured by setting attributes on the `tinymce-editor` custom element. All attributes may be represented as strings, however some attributes will accept boolean or number inputs. Where an array, object, or function is a valid input; examples have been provided.

### Setting the initial content

To set the initial editor content, add encoded HTML to the `tinymce-editor` element as content, such as:

```html
<tinymce-editor>
  &lt;p&gt;This will be the initial content of the editor.&lt;/p&gt;
</tinymce-editor>
```
The editor will load the text content in the `tinymce-editor` element as the initial HTML.

> **Important:** The HTML must be encoded as text to prevent injected javascript from running, which may have an unintended impact on the surrounding document.

### Loading plugins

To add plugins and extend the functionality of the editor, add a string of plugin identifiers using the `plugins` attribute, such as:

```html
<tinymce-editor plugins="advlist autolink link image lists charmap preview"></tinymce-editor>
```
For information on plugins, see: [Add plugins to TinyMCE](../work-with-plugins/).

### Setting the editor width

To set the width of the editor (content area and user interface), use the `width` attribute. For example:

#### Setting a pixel-based editor width

```html
<tinymce-editor width="300"></tinymce-editor>
```

#### Setting a CSS unit based editor width

```html
<tinymce-editor width="50%"></tinymce-editor>
```

### Setting the editor height

To set the height of the editor (content area and user interface), use the `height` attribute. For example:

#### Setting a pixel-based editor height

```html
<tinymce-editor height="300"></tinymce-editor>
```

#### Setting a CSS unit based height

```html
<tinymce-editor height="15em"></tinymce-editor>
```

### Setting readonly mode

To set the editor’s mode to `readonly`.

```html
<tinymce-editor readonly></tinymce-editor>
```

### Setting disabled state

To set the editor to a disabled state.

```html
<tinymce-editor disabled></tinymce-editor>
```

### Setting the toolbar

To set the editor toolbar buttons, use the `toolbar` attribute. For example:

```html
<tinymce-editor toolbar="undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | outdent indent"></tinymce-editor>
```
The `toolbar` attribute accepts a space-separated string of toolbar buttons with pipe characters (`|`) for grouping buttons. For a list of available toolbar buttons, see: [Toolbar Buttons Available for TinyMCE](../available-toolbar-buttons/).

#### Disabling the toolbar

To disable the toolbar, set the `toolbar` attribute to `"false"`. For example:

```html
<tinymce-editor toolbar="false"></tinymce-editor>
```

### Setting the toolbar mode

To control the behavior of the toolbar, set the `toolbar_mode` attribute. For example:

```html
<tinymce-editor toolbar_mode="floating"></tinymce-editor>
```
For information on the available toolbar modes, see: [User interface options - `toolbar_mode`](../toolbar-configuration-options/#toolbar_mode).

### Setting the menu bar

To set the menus shown on the editor menu bar, add the `menubar` attribute. For example:

```html
<tinymce-editor menubar="file edit insert view format table tools help"></tinymce-editor>
```
To change the menu items shown in the menus, or define custom menus, set the `menu` configuration option using the `config` attribute.

For information on:

- The `menubar` configuration option, see: [User interface options - `menubar`](../menus-configuration-options/#menubar).
- The `menu` configuration option, see: [User interface options - `menu`](../menus-configuration-options/#menu).
- The `config` attribute, see: [Setting additional configuration options](#setting-additional-configuration-options).

### Setting context menu

To change the context menu sections that can be shown in the editor context menu, use the `contextmenu` attribute. Such as:

```html
<tinymce-editor plugins="link image table" contextmenu="link image table"></tinymce-editor>
```
For a list of available context menu sections, see: [Available context menu sections](../editor-context-menu-identifiers/). For information on context menus, see: [User interface options - `contextmenu`](../menus-configuration-options/#contextmenu).

### Setting the quick-insert toolbar

The quick-insert toolbar is shown when a new line is added, providing buttons for inserting objects such as tables and images.

To add a quick-insert toolbar, add `"quickbars"` to the `plugins` attribute. To change the quick-insert toolbar, set the `quickbars_insert_toolbar` attribute, such as:

```html
<tinymce-editor plugins="quickbars pagebreak" quickbars_insert_toolbar="quickimage quicktable quicklink | hr pagebreak"></tinymce-editor>
```
The `quickbars_insert_toolbar` attribute accepts a space-separated string of toolbar buttons with pipe characters (`|`) for grouping buttons. For a list of available toolbar buttons, see: [Toolbar Buttons Available for TinyMCE](../available-toolbar-buttons/).

To disable the quick-insert toolbar, set the `quickbars_insert_toolbar` attribute to `"false"`. For example:

```html
<tinymce-editor plugins="quickbars" quickbars_insert_toolbar="false"></tinymce-editor>
```

### Setting the quick-selection toolbar

The quick-selection toolbar is shown when text is selected, providing formatting buttons such as: `bold`, `italic`, and `link`.

To add a quick-selection toolbar, add `"quickbars"` to the `plugins` attribute. To change the quick-selection toolbar, set the `quickbars_selection_toolbar` attribute, such as:

```html
<tinymce-editor plugins="quickbars" quickbars_selection_toolbar="bold italic | blocks | quicklink blockquote"></tinymce-editor>
```
The `quickbars_selection_toolbar` attribute accepts a space-separated string of toolbar buttons with pipe characters (`|`) for grouping buttons. For a list of available toolbar buttons, see: [Toolbar Buttons Available for TinyMCE](../available-toolbar-buttons/).

To disable the quick-selection toolbar, set the `quickbars_selection_toolbar` attribute to `"false"`. For example:

```html
<tinymce-editor plugins="quickbars" quickbars_selection_toolbar="false"></tinymce-editor>
```

### Setting content stylesheets

To set the CSS for the content area of the editor, use the `content_css` attribute.

For example, to use one of the TinyMCE CSS configurations:

```html
<tinymce-editor content_css="writer"></tinymce-editor>
```
To use a custom CSS file, provide a relative or abolute path to the css file, such as:

```html
<tinymce-editor content_css="path/to/mycontent.css"></tinymce-editor>
```
Tiny recommends using:

- The `content_style` option to apply a small set of CSS styles.
- The `content_css` option for applying large or complex CSS configurations.

For information on the `content_css` option, see: [Content appearance options - `content_css`](../add-css-options/#content_css).

### Setting content styling

To apply a small set of CSS styles to the editor, use the `content_style` attribute. For example:

```html
<tinymce-editor content_style="div { margin: 10px; border: 5px solid red; padding: 3px; }"></tinymce-editor>
```
Tiny recommends using:

- The `content_style` option to apply a small set of CSS styles.
- The `content_css` option for applying large or complex CSS configurations.

For information on the `content_style` option, see: [Content appearance options - `content_style`](../add-css-options/#content_style).

### Settings for when PowerPaste plugin enabled

> **Note:** These settings only apply if the PowerPaste plugin (`powerpaste`) is enabled.

#### PowerPaste’s word import method

To control how content pasted from Microsoft Word is filtered, use the `powerpaste_word_import` attribute. For example:

```html
<tinymce-editor powerpaste_word_import="merge"></tinymce-editor>
```
For information on the `powerpaste_word_import` option, including supported values, see: [The PowerPaste plugin - `powerpaste_word_import`](../powerpaste-options/#powerpaste_word_import).

#### PowerPaste’s html import method

To control how content pasted from sources other than Microsoft Word is filtered, use the `powerpaste_html_import` attribute. For example:

```html
<tinymce-editor powerpaste_html_import="prompt"></tinymce-editor>
```
For information on the `powerpaste_html_import` option, including supported values, see: [The PowerPaste plugin - `powerpaste_html_import`](../powerpaste-options/#powerpaste_html_import).

#### PowerPaste to allow local images

To prevent Base64 encoded images with a data URI from being pasted into the editor, set `powerpaste_allow_local_images` to `"false"`. For example:

```html
<tinymce-editor powerpaste_allow_local_images="false"></tinymce-editor>
```
For information on the `powerpaste_allow_local_images` option, including supported values, see: [The PowerPaste plugin - `powerpaste_allow_local_images`](../powerpaste-options/#powerpaste_allow_local_images).

### Showing resize handles

The `resize` attribute gives you the ability to disable the resize handle or set it to resize the editor both horizontal and vertically. By default the editor will resize vertically (`resize="true"`).

To remove the resize handle and disable resizing of the editor, set the `resize` attribute to `"false"`. Such as:

```html
<tinymce-editor resize="false"></tinymce-editor>
```
To allow the user to resize the editor both horizontally and vertically, set the `resize` attribute to `"both"`. For example:

```html
<tinymce-editor resize="both"></tinymce-editor>
```
For information on the `resize` option, see: [User interface options - `resize`](../editor-size-options/#resize).

### Setting the editor setup function

To execute a javascript callback before the editor instance is rendered, use the `setup` attribute. For example:

```html
<script>
  function setupEditor(editor) {
    editor.on('click', function () {
      console.log('Editor was clicked');
    });
  }
</script>
<tinymce-editor setup="setupEditor"></tinymce-editor>
```
For information on the `setup` option, see: [Integration and setup options - `setup`](../editor-important-options/#setup).

### Setting the editor skin

To apply a custom skin to the editor, use the `skin` attribute. For example:

```html
<tinymce-editor skin="borderless"></tinymce-editor>
```
For information on:

- Using the `skin` option, see: [User interface options - `skin`](../editor-skin/#skin).
- Tiny enhanced skins, see: [Enhanced Skins & Icon Packs](../enhanced-skins-and-icon-packs/).
- Creating a custom skin for TinyMCE, see: [Create a skin for TinyMCE](../creating-a-skin/).

### Setting the images upload URL

To specify the location of a server-side upload handler, use the `images_upload_url` attribute. For example:

```html
<tinymce-editor images_upload_url="postAcceptor.php"></tinymce-editor>
```
The upload handler should return the location of the uploaded file in the following format:

```json
{ "location": "folder/sub-folder/new-location.png" }
```
For information on using the `images_upload_url`, see: [Image uploads - `images_upload_url`](../file-image-upload/#images_upload_url).

### Setting the images upload handler

To specify custom image upload handler callback function, use the `images_upload_handler` attribute.

```html
<script>
const example_image_upload_handler = (blobInfo, progress) => new Promise((resolve, reject) => {
  const xhr = new XMLHttpRequest();
  xhr.withCredentials = false;
  xhr.open('POST', 'postAcceptor.php');

  xhr.upload.onprogress = (e) => {
    progress(e.loaded / e.total * 100);
  };

  xhr.onload = () => {
    if (xhr.status === 403) {
      reject({ message: 'HTTP Error: ' + xhr.status, remove: true });
      return;
    }

    if (xhr.status < 200 || xhr.status >= 300) {
      reject('HTTP Error: ' + xhr.status);
      return;
    }

    const json = JSON.parse(xhr.responseText);

    if (!json || typeof json.location != 'string') {
      reject('Invalid JSON: ' + xhr.responseText);
      return;
    }

    resolve(json.location);
  };

  xhr.onerror = () => {
    reject('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
  };

  const formData = new FormData();
  formData.append('file', blobInfo.blob(), blobInfo.filename());

  xhr.send(formData);
});
</script>
<tinymce-editor images_upload_handler="example_image_upload_handler"></tinymce-editor>
```
For information on using the `images_upload_handler` option, see: [Image uploads - `images_upload_handler`](../file-image-upload/#images_upload_handler).

### Setting the images upload base path

To specify the basepath to prepend to URLs returned from the configured `images_upload_url` script, use the `images_upload_base_path` attribute. For example:

```html
<tinymce-editor images_upload_url="postAcceptor.php" images_upload_base_path="/some/basepath"></tinymce-editor>
```
For information on using the `images_upload_base_path` option, see: [Image uploads - `images_upload_base_path`](../file-image-upload/#images_upload_base_path).

### Setting the images upload to have credentials

To receive credentials (such as cookies, authorization headers, or TLS client certificates) for cross-domain image uploads, set the `images_upload_credentials` attribute to `"true"`.

```html
<tinymce-editor images_upload_url="postAcceptor.php" images_upload_credentials="true"></tinymce-editor>
```
For information on using the `images_upload_credentials` option, see: [Image uploads - `images_upload_credentials`](../file-image-upload/#images_upload_credentials).

### Setting the images upload to reuse filenames

To force the editor to use the same filename for a given image, regardless of the number of times it is uploaded within a given instance, set the `images_reuse_filename` attribute to `"true"`.

```html
<tinymce-editor images_upload_url="postAcceptor.php" images_reuse_filename="true"></tinymce-editor>
```
For information on using the `images_reuse_filename` option, see: [Image uploads - `images_reuse_filename`](../file-image-upload/#images_reuse_filename).

### Setting the icon pack

To apply a bundled set of custom or premium icons to the editor, use the `icons` attribute. For example:

```html
<tinymce-editor icons="material"></tinymce-editor>
```
Use this attribute if the icon pack is bundled with TinyMCE (including custom icon packs). If the icon pack is hosted on a web site, use the [`icons_url` attribute](#setting-the-icon-pack-url).

For information on:

- Using the `icons` option, see: [User interface options - `icons`](../editor-icons/#icons).
- Tiny premium icon packs, see: [Enhanced Skins & Icon Packs](../enhanced-skins-and-icon-packs/).
- Creating a custom icon pack for TinyMCE, see: [Create an icon pack for TinyMCE](../creating-an-icon-pack/).

### Setting the icon pack URL

To apply a hosted set of custom or premium icons to the editor, use the `icons_url` attribute. For example:

```html
<tinymce-editor icons_url="https://www.example.com/icons/material/icons.js"></tinymce-editor>
```
Use this attribute if the icon pack is hosted on a web site. If the icon pack is bundled with TinyMCE (including custom icon packs), use the [`icons` attribute](#setting-the-icon-pack).

For information on:

- Using the `icons_url` option, see: [User interface options - `icons_url`](../editor-icons/#icons_url).
- Tiny premium icon packs, see: [Enhanced Skins & Icon Packs](../enhanced-skins-and-icon-packs/).
- Creating a custom icon pack for TinyMCE, see: [Create an icon pack for TinyMCE](../creating-an-icon-pack/).

### Setting additional configuration options

To configure any TinyMCE option that does not have a corresponding attribute, use the `config` attribute. For example:

```html
<script>
  window.myConfig = {
    height: 500,
    spellchecker_dialog: true,
    spellchecker_ignore_list: ['Ephox', 'Moxiecode']
  };
</script>
<tinymce-editor
  config="myConfig"
  width="50%"
  toolbar="undo redo | bold italic | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | link | spellchecker"
  plugins="lists link searchreplace table tinymcespellchecker wordcount"
></tinymce-editor>
```
Configuration options that have an attribute can also be passed to the `config` attribute.

## Event binding

There are two methods to bind events for the TinyMCE Web Component.

- The `setup` attribute, as described in [Setting the editor setup function](#setting-the-editor-setup-function). For example:

```html
<script>
  function setupEditor(editor) {
    editor.on('click', function () {
      console.log('Editor was clicked');
    });
  }
</script>
<tinymce-editor setup="setupEditor"/>
```
- The `on-` attributes, such as the `on-NodeChange` attribute. For example:

```html
<script>
  function changeHandler(evt) {
    console.log('The ' + evt['type'] + ' event was fired.');
  }
</script>
<tinymce-editor on-Change="changeHandler"/>
```
If these attributes are later removed, the event will be automatically unbound. For the full list of supported `on-` attributes, see: [Supported browser events](#supported-browser-events) and [Supported TinyMCE events](#supported-tinymce-events).

### Supported browser events

Bind the following browser events using the corresponding TinyMCE Web Component attribute.

| Browser event | Attribute |
| --- | --- |
| `BeforePaste` | `on-BeforePaste` |
| `Blur` | `on-Blur` |
| `Click` | `on-Click` |
| `ContextMenu` | `on-ContextMenu` |
| `Copy` | `on-Copy` |
| `Cut` | `on-Cut` |
| `Dblclick` | `on-Dblclick` |
| `Drag` | `on-Drag` |
| `DragDrop` | `on-DragDrop` |
| `DragEnd` | `on-DragEnd` |
| `DragGesture` | `on-DragGesture` |
| `DragOver` | `on-DragOver` |
| `Drop` | `on-Drop` |
| `Focus` | `on-Focus` |
| `FocusIn` | `on-FocusIn` |
| `FocusOut` | `on-FocusOut` |
| `KeyDown` | `on-KeyDown` |
| `KeyPress` | `on-KeyPress` |
| `KeyUp` | `on-KeyUp` |
| `MouseDown` | `on-MouseDown` |
| `MouseEnter` | `on-MouseEnter` |
| `MouseLeave` | `on-MouseLeave` |
| `MouseMove` | `on-MouseMove` |
| `MouseOut` | `on-MouseOut` |
| `MouseOver` | `on-MouseOver` |
| `MouseUp` | `on-MouseUp` |
| `Paste` | `on-Paste` |
| `SelectionChange` | `on-SelectionChange` |

### Supported TinyMCE events

Bind the following TinyMCE events using the corresponding TinyMCE Web Component attribute.

| TinyMCE event | Attribute |
| --- | --- |
| `Activate` | `on-Activate` |
| `AddUndo` | `on-AddUndo` |
| `BeforeAddUndo` | `on-BeforeAddUndo` |
| `BeforeExecCommand` | `on-BeforeExecCommand` |
| `BeforeGetContent` | `on-BeforeGetContent` |
| `BeforeRenderUI` | `on-BeforeRenderUI` |
| `BeforeSetContent` | `on-BeforeSetContent` |
| `Change` | `on-Change` |
| `ClearUndos` | `on-ClearUndos` |
| `Deactivate` | `on-Deactivate` |
| `Dirty` | `on-Dirty` |
| `ExecCommand` | `on-ExecCommand` |
| `GetContent` | `on-GetContent` |
| `Hide` | `on-Hide` |
| `Init` | `on-Init` |
| `LoadContent` | `on-LoadContent` |
| `NodeChange` | `on-NodeChange` |
| `PostProcess` | `on-PostProcess` |
| `PostRender` | `on-PostRender` |
| `PreProcess` | `on-PreProcess` |
| `ProgressState` | `on-ProgressState` |
| `Redo` | `on-Redo` |
| `Remove` | `on-Remove` |
| `Reset` | `on-Reset` |
| `SaveContent` | `on-SaveContent` |
| `SetAttrib` | `on-SetAttrib` |
| `ObjectResizeStart` | `on-ObjectResizeStart` |
| `ObjectResized` | `on-ObjectResized` |
| `ObjectSelected` | `on-ObjectSelected` |
| `SetContent` | `on-SetContent` |
| `Show` | `on-Show` |
| `Submit` | `on-Submit` |
| `Undo` | `on-Undo` |
| `VisualAid` | `on-VisualAid` |