TinyMCE Vue.js integration technical reference

Installing the TinyMCE Vue.js integration using NPM

To install the tinymce-vue package and save it to your package.json.

  • For Vue.js 3.x users:

    npm install --save "@tinymce/tinymce-vue@^4"
  • For Vue.js 2.x users:

    npm install --save "@tinymce/tinymce-vue@^3"

Using the TinyMCE Vue.js integration

  1. Load the component.

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

      // 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:

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

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

    <editor api-key="API_KEY" :init="{plugins: 'wordcount'}" />

Configuring the editor

The editor accepts the following properties:

  :init= "{ }"
  model-events= ""

None of the configuration properties are required for tinymce-vue to work. Specify a Tiny Cloud API key using api-key to remove the This domain is not registered... warning message.


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. To retrieve the Tiny Cloud API key for an existing Tiny Account, login and visit the Tiny Account Dashboard.

Type: String

Default value: 'no-api-key'

Example: using api-key



Tiny Cloud License key.

Use this when self-hosting TinyMCE instead of loading from Tiny Cloud. For more information, see: License Key.

Type: String

Default value: undefined

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

Example: using licenseKey



Type: String

Default value: '7'

Possible values: '7', '7-testing', '7-dev', '7.0'

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.0: The specific enterprise release version of TinyMCE.

Such as:

  :init="{ /* your other settings */ }"


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



An id for the editor. Used for retrieving the editor instance using the tinymce.get('ID') method.

Type: String

Default value: Automatically generated UUID

Example: using id



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

For information on the TinyMCE selector (tinymce.init), see: Basic setup.

Type: Object

Default value: '{ }'

Example: using init

    plugins: 'lists link image paste help wordcount',
    toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | help'


Initial content of the editor when the editor is initialized.

Type: String

Default value: ' '

Example: using initial-value

  initial-value="Once upon a time..."


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 and Setup inline editing mode.

Type: Boolean

Default value: false

Possible values: true, false

Example: using inline



Sets the trigger events for v-model events.

For a list of available TinyMCE events, see: Available Events - Editor events.

Type: String

Default value: 'change keyup undo redo'.

Example: using model-events

  model-events="change keydown blur focus paste"


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



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.

Type: String or Array

Example: using plugins

  plugins="lists code"


Only valid when <editor :inline=true />. Used to define the HTML element for the editor in inline mode.

Type: String

Default value: 'div'

Example: using tag-name



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.

Type: String

Example: using toolbar

  toolbar="bold italic underline code"


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

Type: String

Example: using tinymce-script-src


Form Input Bindings: v-model

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

<editor v-model="content" />

For information on v-model and form input bindings, see: Vue.js documentation - Form Input Bindings.

Event binding

Functions can be bound to editor events, such as:

<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