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

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

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.

Possible values: See Toolbar Buttons Available for TinyMCE.

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