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:

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

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.

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

<editor
  api-key="your-api-key"
/>

cloud-channel

Type: String

Default value: '6'

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

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

  • 6 (Default): The current enterprise release of TinyMCE.

  • 6-testing: The current release candidate for the next enterprise release of TinyMCE.

  • 6-dev: The nightly-build version of TinyMCE.

  • A version number such as 6.8: The specific enterprise release version of TinyMCE.

Such as:

<editor
  api-key="your-api-key"
  cloud-channel="6-dev"
  :init="{ /* your other settings */ }"
/>

For information TinyMCE development channels, see: Specifying the TinyMCE editor version deployed from Cloud - dev, testing, and stable releases.

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

<editor
  :disabled=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

Example: using id

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

Type: Object

Default value: '{ }'

Example: using init

<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

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

Type: Boolean

Default value: false

Possible values: true, false

Example: using inline

<editor
  :inline=true
/>

model-events

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

<editor
  model-events="change keydown blur focus 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

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

Type: String or Array

Example: using plugins

<editor
  plugins="lists code"
/>

tag-name

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

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

Type: String

Possible values: See Toolbar Buttons Available for TinyMCE.

Example: using toolbar

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

Type: String

Example: using tinymce-script-src

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

<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

  • 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

  • saveContent

  • selectionChange

  • setAttrib

  • setContent

  • show

  • submit

  • undo

  • visualAid