TinyMCE Vue.js integration technical reference

Installing the TinyMCE Vue.js integration using NPM

To install the tinymce-vue package.

  • For Vue.js 3.x users:

    npm install "@tinymce/tinymce-vue"

  • For Vue.js 2.x users:

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

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

<editor
  api-key="no-api-key"
  cloud-channel="7"
  :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 "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. 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="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.

Type: String

Default value: undefined

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

Example: using licenseKey

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

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

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

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

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

  • 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