Vue integration

TinyMCE Vue.js integration quick start guide

The Official TinyMCE Vue.js component integrates TinyMCE into Vue.js projects. This procedure creates a basic Vue.js application containing a TinyMCE editor based on our Basic example.

Version 4 of the tinymce-vue package supports Vue.js 3.x, but does not support Vue.js 2.x. For Vue.js 2.x applications, use tinymce-vue version 3.

TinyMCE Vue.js integration live examples

For examples of the TinyMCE Vue.js 2.x integration, visit: the tinymce-vue storybook.

For examples of the TinyMCE Vue.js 3.x integration:

  1. Clone the tinymce/tinymce-vue GitHub repository. For example:

     $ git clone https://github.com/tinymce/tinymce-vue.git
  2. Install the required packages using yarn. For example:

     $ yarn install
  3. To start the demo server, run:

     $ yarn demo

The tinymce-vue demo is now running. Visit: http://localhost:3001.

Prerequisites

This procedure requires:

Procedure

  1. On a command line or command prompt, install the Vue CLI Tool package.

     $ npm install -g @vue/cli
  2. Create a new Vue.js project named tinymce-vue-demo.

    • To use the interactive prompt, run:

      $ vue create tinymce-vue-demo
    • To skip the interactive prompt:

      • For Vue.js 3.x users:

        $ vue create --inlinePreset '{ "vueVersion": "3", "plugins": {} }' tinymce-vue-demo
      • For Vue.js 2.x users:

        $ vue create --inlinePreset '{ "vueVersion": "2", "plugins": {} }' tinymce-vue-demo
  3. Change into the newly created directory.

     $ cd tinymce-vue-demo
  4. Install the tinymce-vue package and save it to your package.json with --save.

    • 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"
  5. Using a text editor, open /path/to/tinymce-vue-demo/src/App.vue.

    1. Add a TinyMCE configuration to the <template> using the <editor> tag.

    2. Add import Editor from '@tinymce/tinymce-vue' to the start of the <script>.

    3. Add editor: Editor to the default {components}.

      For example:

      <template>
        <div id="app">
          <img alt="Vue logo" src="./assets/logo.png" />
          <editor
            api-key="no-api-key"
            :init="{
              height: 500,
              menubar: false,
              plugins: [
                'advlist autolink lists link image charmap print preview anchor',
                'searchreplace visualblocks code fullscreen',
                'insertdatetime media table paste code help wordcount'
              ],
              toolbar:
                'undo redo | formatselect | bold italic backcolor | \
                alignleft aligncenter alignright alignjustify | \
                bullist numlist outdent indent | removeformat | help'
            }"
          />
        </div>
      </template>
      
      <script>
        import Editor from '@tinymce/tinymce-vue'
      
        export default {
          name: 'app',
          components: {
            'editor': Editor
          }
        }
      </script>

      This TinyMCE editor configuration should replicate the example on the Basic example page.

  6. Provide access to TinyMCE using either Tiny Cloud or by self-hosting TinyMCE.

    • Tiny Cloud

      Include the api-key option in the editor element and include your Tiny Cloud API key.

      Such as:

        <editor api-key='your-api-key' :init="{ /* your other settings */ }" />
    • TinyMCE Self-hosted

      TinyMCE can be self-hosted by: deploying TinyMCE independent of the Vue.js application, or bundling TinyMCE with the Vue.js application.

      • Deploy TinyMCE independent of the Vue.js application

        To use an independent deployment of TinyMCE, add a script to either the <head> or the end of the <body> of the HTML file, such as:

        <script src="/path/to/tinymce.min.js"></script>

        To use an independent deployment of TinyMCE with the create a Vue.js application, add the script to /path/to/tinymce-vue-demo/public/index.html.

        For information on self-hosting TinyMCE, see: Installing TinyMCE.

      • Bundling TinyMCE with the Vue.js application using a module loader

        To bundle TinyMCE using a module loader (such as Webpack and Browserify), see: Usage with module loaders.

  7. Test the application using the Node.js development server.

    • To start the development server, navigate to the tinymce-vue-demo directory and run:

        $ npm run serve
    • To stop the development server, select on the command line or command prompt and press Ctrl+C.

Deploying the application to a HTTP server.

The application will require further configuration before it can be deployed to a production environment. For information on configuring the application for deployment, see: Vue.js - Production Deployment.

Next Steps

TinyMCE Vue.js technical reference

Covered in this section:

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 a 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="5"
  :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.

Default value: no-api-key

Type: String

Example: Using api-key
<editor api-key="your-api-key"></editor>

cloud-channel

Default value: 5

Possible values: 5-stable, 5-testing, 5-dev

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

  • 5, 5-stable (Default): The current enterprise release of TinyMCE.

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

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

Such as:

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

disabled

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

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. Defaults to an automatically generated UUID.

Default value: Automatically generated UUID.

Type: String

Example: Using id
<editor id="uuid"></editor>

init

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

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

Default value: { }

Type: Object

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

initial-value

Initial content of the editor when the editor is initialized.

Default value: " "

Type: String

Example: Using initial-value
<editor initial-value="Once upon a time..."></editor>

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.

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.

Default value: "change keyup undo redo".

Type: String

Example: Using model-events
<editor model-events="change keydown blur focus paste"></editor>

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

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

tag-name

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

Default value: div

Type: String

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

Example: Using toolbar
<editor plugins="code" toolbar="bold italic underline code"></editor>

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

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

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

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