---
title: "TinyMCE Svelte integration technical reference"
description: "Technical reference for the TinyMCE Svelte integration"
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/svelte-ref/"
md_url: "https://www.tiny.cloud/docs/tinymce/6/svelte-ref/index.md"
version: "6"
last_updated: "2022-04-07T05:31:36Z"
tokens: 1301
---
Important This page documents TinyMCE 6. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/svelte-ref/).
# TinyMCE Svelte integration technical reference

Covered in this section:

- [Configuring the TinyMCE Svelte integration](#configuring-the-tinymce-svelte-integration)
- [Component binding](#component-binding)
- [Event binding](#event-binding)

## Configuring the TinyMCE Svelte integration

The `tinymce-svelte` `Editor` component accepts the following properties:

```jsx
<Editor
  apiKey="api-key"
  channel="6"
  id="uuid"
  inline=false
  disabled=false
  scriptSrc=undefined
  conf={}
  modelEvents="input change undo redo"
  value="value"
  text="readonly-text-output"
/>
```

### `apiKey`

Tiny Cloud API key. Required for deployments using the Tiny Cloud to provide the TinyMCE editor.

**Type:** `String`

**Default value:** `'no-api-key'`

#### Example using `apiKey`

```jsx
<Editor
  apiKey="your-api-key"
/>
```

### `channel`

Specifies the Tiny Cloud channel to use. For information on Tiny Cloud deployment channels, see: [Specifying the TinyMCE editor version deployed from Cloud](../editor-plugin-version/).

**Type:** `String`

**Default value:** `'6'`

**Possible values:** `'6'`, `'6-testing'`, `'6-dev'`, `'6.8'`

#### Example using `channel`

```jsx
<Editor
  channel="6-dev"
/>
```

### `id`

Specified an Id for the editor. Used for retrieving the editor instance using the `tinymce.get('ID')` method.

**Type:** `String`

**Default value:** Automatically generated [UUID](https://tools.ietf.org/html/rfc4122)

#### Example using `id`

```jsx
<Editor
  id="my-unique-identifier"
/>
```

### `inline`

Set the editor to inline mode.

**Type:** `Boolean`

**Default value:** `false`

#### Example using `inline`

```jsx
<Editor
  inline=true
/>
```

### `disabled`

Set the editor to readonly mode.

**Type:** `Boolean`

**Default value:** `false`

#### Example using `disabled`

```jsx
<Editor
  disabled=true
/>
```

### `scriptSrc`

Use the `scriptSrc` property to specify the location of TinyMCE to lazy load when the application is not using Tiny Cloud. This setting is required if the application uses a self-hosted version of TinyMCE, such as the TinyMCE npm package or a .zip package of TinyMCE.

**Type:** `String`

#### Example using `scriptSrc`

```jsx
<Editor
  scriptSrc="/path/to/tinymce.min.js"
/>
```

### `conf`

Specify a set of properties for the `Tinymce.init` method to initialize the editor.

**Type:** `Object`

**Default value:** `{}`

#### Example using `conf`

```jsx
<script>
 let conf = {
   toolbar: 'undo redo',
   menubar: false
 }
</script>
<main>
  <Editor
    {conf}
  />
</main>
```

## Component binding

### Input binding

The editor component allows developers to bind the contents of editor to a variable. By specifying the `bind:value`, developers can create a two-way binding on a selected variable.

### Example of input binding

```jsx
<script>
let value = 'some content';
</script>
<main>
  <Editor bind:value={value} />
  <div>{@html value}</div>
  <textarea bind:value={value}></textarea>
</main>
```

### Binding text output

The editor exposes the `text` property, which developers can `bind` to retrieve a read-only value of the editor content as text. Changes will not propagate up to the editor if the `text` bound variable changes. It will only propagate changes from the editor.

### Example of text binding

```jsx
<script>
let text = '';
</script>
<main>
  <Editor bind:text={text} />
  <div>{text}</div>
</main>
```

## Event binding

Functions can be bound to editor events, such as:

```jsx
<Editor on:resizeeditor={this.handlerFunction} />
```
When the handler is called (**handlerFunction** in this example), it is called with two arguments:

`event` The TinyMCE event object.

`editor` A reference to the editor.

Ensure event names are specified in lower-case (event names are case-sensitive).

The following events are available:

- `activate`
- `addundo`
- `beforeaddundo`
- `beforeexeccommand`
- `beforegetcontent`
- `beforerenderui`
- `beforesetcontent`
- `beforepaste`
- `blur`
- `change`
- `clearundos`
- `click`
- `contextmenu`
- `copy`
- `cut`
- `dblclick`
- `deactivate`
- `dirty`
- `drag`
- `dragdrop`
- `dragend`
- `draggesture`
- `dragover`
- `drop`
- `execcommand`
- `focus`
- `focusin`
- `focusout`
- `getcontent`
- `hide`
- `init`
- `keydown`
- `keypress`
- `keyup`
- `loadcontent`
- `mousedown`
- `mouseenter`
- `mouseleave`
- `mousemove`
- `mouseout`
- `mouseover`
- `mouseup`
- `nodechange`
- `objectresizestart`
- `objectresized`
- `objectselected`
- `paste`
- `postprocess`
- `postrender`
- `preprocess`
- `progressstate`
- `redo`
- `remove`
- `reset`
- `resizeeditor`
- `savecontent`
- `selectionchange`
- `setattrib`
- `setcontent`
- `show`
- `submit`
- `undo`
- `visualaid`