---
title: "TinyMCE Vue.js integration technical reference"
description: "Technical reference for the TinyMCE Vue.js integration"
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/vue-ref/"
md_url: "https://www.tiny.cloud/docs/tinymce/7/vue-ref/index.md"
version: "7"
last_updated: "2025-06-03T06:35:50Z"
tokens: 2923
---
Important This page documents TinyMCE 7. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/vue-ref/).
# TinyMCE Vue.js integration technical reference

**Covered in this section:**

- [Installing the TinyMCE Vue.js integration using NPM](#installing-the-tinymce-vuejs-integration-using-npm)
- [Using the TinyMCE Vue.js integration](#using-the-tinymce-vuejs-integration)
- [Configuring the editor](#configuring-the-editor)

  - [`api-key`](#api-key)
  - [`licenseKey`](#license-key)
  - [`cloud-channel`](#cloud-channel)
  - [`disabled`](#disabled)
  - [`readonly`](#readonly)
  - [`id`](#id)
  - [`init`](#init)
  - [`initial-value`](#initial-value)
  - [`inline`](#inline)
  - [`model-events`](#model-events)
  - [`output-format`](#output-format)
  - [`plugins`](#plugins)
  - [`tag-name`](#tag-name)
  - [`toolbar`](#toolbar)
  - [`tinymce-script-src`](#tinymce-script-src)
- [Form Input Bindings: `v-model`](#form-input-bindings-v-model)
- [Event binding](#event-binding)

## Installing the TinyMCE Vue.js integration using NPM

To install the `tinymce-vue` package.

- For Vue.js 3.x users:

```sh
npm install "@tinymce/tinymce-vue"
```
- For Vue.js 2.x users:

```sh
npm install "@tinymce/tinymce-vue@^3"
```

## Using the TinyMCE Vue.js integration

1. Load the component.

  - For bundle loader users (such as `webpack`, `rollup`, or `browserify`):

```js
// es modules
import Editor from '@tinymce/tinymce-vue';
// commonjs require
// NOTE: default needed after require
var Editor = require('@tinymce/tinymce-vue').default;
```
  - To load `tinymce-vue` in an HTML file:

```html
<script src="/path/to/tinymce-vue.min.js"></script>
```
2. Add the editor to the `components` property of the app:

```js
// This might look different depending on how you have set up your app
// but the important part is the components property
var app = new Vue({
  el: '#app',
  data: { /* Your data */ },
  components: {
    'editor': Editor // <- Important part
  },
  methods: { /* Your methods */}
})
```
3. Add the `<editor>` tag to the `template`

```html
<editor
  id="uuid"
  api-key="no-api-key"
  :init="{
    plugins: 'advlist anchor autolink charmap code fullscreen help image insertdatetime link lists media preview searchreplace table visualblocks wordcount',
    toolbar: 'undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
    height: 500,
  }"
/>
```

## Configuring the editor

The editor accepts the following properties:

```html
<editor
  api-key="no-api-key"
  cloud-channel="7"
  :disabled=false
  :readonly=false
  id="uuid"
  :init= "{ }"
  initial-value=""
  :inline=true
  model-events= ""
  plugins=""
  tag-name="div"
  toolbar=""
  value=""
/>
```

> **Note:** None of the configuration properties are **required** for `tinymce-vue` to work. Specify a Tiny Cloud API key using `api-key` to remove the "A valid API key is required to continue using TinyMCE. Please alert the admin to check the current API key. Click here to learn more." warning message.

### `api-key`

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

To register for a Tiny Cloud API key, visit the [Tiny Account sign-up page](/auth/signup/). To retrieve the Tiny Cloud API key for an existing Tiny Account, login and visit the [Tiny Account Dashboard](/my-account/).

**Type:** `String`

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

#### Example: using `api-key`

```html
<editor
  api-key="no-api-key"
/>
```

### `licenseKey`

Tiny Cloud License key.

Use this when self-hosting TinyMCE instead of loading from Tiny Cloud. For more information, see: [License Key](../license-key/).

**Type:** `String`

**Default value:** `undefined`

**Possible values:** `undefined`, `'gpl'` or a valid TinyMCE license key

#### Example: using `licenseKey`

```html
<editor
  licenseKey="your-license-key"
/>
```

### `cloud-channel`

**Type:** `String`

**Default value:** `'7'`

**Possible values:** `'7'`, `'7-testing'`, `'7-dev'`, `'7.9'`

Changes the TinyMCE build used for the editor to one of the following Tiny Cloud channels:

- `7` (**Default**): The current enterprise release of TinyMCE.
- `7-testing`: The current release candidate for the next enterprise release of TinyMCE.
- `7-dev`: The nightly-build version of TinyMCE.
- A version number such as `7.9`: The specific enterprise release version of TinyMCE.

Such as:

```html
<editor
  api-key="no-api-key"
  cloud-channel="7-dev"
  :init="{ /* your other settings */ }"
/>
```
For information TinyMCE development channels, see: [Specifying the TinyMCE editor version deployed from Cloud - dev, testing, and stable releases](../editor-plugin-version/#7-7-testing-and-7-dev-release-channels).

### `disabled`

The `disabled` property can dynamically switch the editor between a "disabled" (read-only) mode (`true`) and the standard editable mode (`false`).

**Type:** `Boolean`

**Default value:** `false`

**Possible values:** `true`, `false`

#### Example: using `disabled`

```html
<editor
  :disabled=true
/>
```

### `readonly`

The `readonly` property can dynamically switch the editor between a "read-only" mode (`true`) and the standard editable mode (`false`).

**Type:** `Boolean`

**Default value:** `false`

**Possible values:** `true`, `false`

#### Example: using `readonly`

```html
<editor
  :readonly=true
/>
```

### `id`

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`

```html
<editor
  id="uuid"
/>
```

### `init`

Object sent to the `tinymce.init` method used to initialize the editor.

For information on the TinyMCE selector (`tinymce.init`), see: [Basic setup](../basic-setup/).

**Type:** `Object`

**Default value:** `'{ }'`

#### Example: using `init`

```html
<editor
  :init="{
    plugins: 'lists link image paste help wordcount',
    toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | help'
  }"
/>
```

### `initial-value`

Initial content of the editor when the editor is initialized.

**Type:** `String`

**Default value:** `' '`

#### Example: using `initial-value`

```html
<editor
  initial-value="Once upon a time..."
/>
```

### `inline`

Used to set the editor to inline mode. Using `<editor :inline=true />` is the same as setting `{inline: true}` in the TinyMCE selector (`tinymce.init`).

For information on inline mode, see: [User interface options - `inline`](../inline-editor-options/#inline) and [Setup inline editing mode](../use-tinymce-inline/).

**Type:** `Boolean`

**Default value:** `false`

**Possible values:** `true`, `false`

#### Example: using `inline`

```html
<editor
  :inline=true
/>
```

### `model-events`

Sets the trigger events for [v-model events](#form-input-bindings-v-model).

For a list of available TinyMCE events, see: [Available Events - Editor events](../events/#editor-core-events).

**Type:** `String`

**Default value:** `'change keyup undo redo'`.

#### Example: using `model-events`

```html
<editor
  model-events="change input undo paste"
/>
```

### `output-format`

Used to specify the format of the content emitted via the `input` event. This affects the format of the content used in conjunction with data binding.

**Type:** `String`

**Default value:** `'html'`

**Possible values:** `'html'`, `'text'`

#### Example: using `output-format`

```html
<editor
  output-format="text"
/>
```

### `plugins`

Used to include plugins for the editor. Using `<editor plugins="lists code" />` is the same as setting `{plugins: 'lists code'}` in the TinyMCE selector (`tinymce.init`).

For information on adding plugins to TinyMCE, see: [Add plugins to TinyMCE](../work-with-plugins/).

**Type:** `String` or `Array`

#### Example: using `plugins`

```html
<editor
  plugins="lists code"
/>
```

### `tag-name`

Only valid when [`<editor :inline=true />`](#inline). Used to define the HTML element for the editor in inline mode.

**Type:** `String`

**Default value:** `'div'`

#### Example: using `tag-name`

```html
<editor
  :inline=true
  tag-name="my-custom-tag"
/>
```

### `toolbar`

Used to set the toolbar for the editor. Using `<editor toolbar="bold italic" />` is the same as setting `{toolbar: 'bold italic'}` in the TinyMCE selector (`tinymce.init`).

For information setting the toolbar for TinyMCE, see: [User interface options - toolbar](../toolbar-configuration-options/#toolbar).

**Type:** `String`

**Possible values:** See [Toolbar Buttons Available for TinyMCE](../available-toolbar-buttons/).

#### Example: using `toolbar`

```html
<editor
  plugins="code"
  toolbar="bold italic underline code"
/>
```

### `tinymce-script-src`

Use the `tinymce-script-src` prop to specify an external version of TinyMCE to lazy load from.

**Type:** `String`

#### Example: using `tinymce-script-src`

```html
<editor
  tinymce-script-src="/path/to/tinymce.min.js"
/>
```

## Form Input Bindings: `v-model`

The `v-model` directive can be used to create a two-way data binding. For example:

```html
<editor v-model="content" />
```
For information on `v-model` and form input bindings, see: [Vue.js documentation - Form Input Bindings](https://vuejs.org/guide/essentials/forms.html).

## Event binding

Functions can be bound to editor events, such as:

```html
<editor @selectionChange="handlerFunction" />
```
For older versions of Vue (Vue 2) supported by v3.x, the syntax for event bindings are: `<editor v-on:selectionChange="handlerFunction">` or `<editor @onSelectionChange="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.

The following events are available:

- `activate`
- `addUndo`
- `beforeAddUndo`
- `beforeExecCommand`
- `beforeGetContent`
- `beforeRenderUI`
- `beforeSetContent`
- `beforePaste`
- `blur`
- `change`
- `clearUndos`
- `click`
- `contextMenu`
- `commentChange`
- `compositionEnd`
- `compositionStart`
- `compositionUpdate`
- `copy`
- `cut`
- `dblclick`
- `deactivate`
- `dirty`
- `drag`
- `dragDrop`
- `dragEnd`
- `dragGesture`
- `dragOver`
- `drop`
- `execCommand`
- `focus`
- `focusIn`
- `focusOut`
- `getContent`
- `hide`
- `init`
- `input`
- `keyDown`
- `keyPress`
- `keyUp`
- `loadContent`
- `mouseDown`
- `mouseEnter`
- `mouseLeave`
- `mouseMove`
- `mouseOut`
- `mouseOver`
- `mouseUp`
- `nodeChange`
- `objectResizeStart`
- `objectResized`
- `objectSelected`
- `paste`
- `postProcess`
- `postRender`
- `preProcess`
- `progressState`
- `redo`
- `remove`
- `reset`
- `saveContent`
- `selectionChange`
- `setAttrib`
- `setContent`
- `show`
- `submit`
- `undo`
- `visualAid`