Important changes to Tiny Cloud pricing > Find out more

Vue integration

The Official TinyMCE Vue.js component

Contribute to this page

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.

For examples of the TinyMCE integration, visit the tinymce-vue storybook.

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.

     $ vue create --default 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.

     $ npm install --save @tinymce/tinymce-vue
    
  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"
           initialValue="<p>This is the initial content of the editor</p>"
           :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'
           }"
           ></editor>
       </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 Tiny Cloud or by self-hosting TinyMCE.

    • Tiny Cloud

      Include the api-key option in the editor element and include your TinyMCE 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: Advanced installation choices.

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

```
$ npm install --save @tinymce/tinymce-vue
```

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

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 API key. Required for deployments using the Tiny Cloud to provide the TinyMCE editor.

To register for a Tiny Cloud API key, visit the sign-up page.

Default value: no-api-key

Type: String

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

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

Default value: "{ }"

Type: Object

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

Default value: false

Possible values: true, false

Example: inline
<editor
  :inline=true
/>

model-events

Sets the trigger events for v-model events.

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

Default value: "change keyup undo redo".

Type: String

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

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

Default value: div

Type: String

Example: tag-name
<editor
  :inline=true
  tag-name='myTextArea'
/>

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.

Default value: " "

Possible values: See Editor control identifiers - Toolbar controls.

Type: String

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

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 @onSelectionChange="handlerFunction"></editor>

Where the handlerFunction is triggered with the event and is called with two arguments:

  • event - The event object.
  • editor - A reference to the editor.

The following events are available:

  • onActivate
  • onAddUndo
  • onBeforeAddUndo
  • onBeforeExecCommand
  • onBeforeGetContent
  • onBeforeRenderUI
  • onBeforeSetContent
  • onBeforePaste
  • onBlur
  • onChange
  • onClearUndos
  • onClick
  • onContextMenu
  • onCopy
  • onCut
  • onDblclick
  • onDeactivate
  • onDirty
  • onDrag
  • onDragDrop
  • onDragEnd
  • onDragGesture
  • onDragOver
  • onDrop
  • onExecCommand
  • onFocus
  • onFocusIn
  • onFocusOut
  • onGetContent
  • onHide
  • onInit
  • onKeyDown
  • onKeyPress
  • onKeyUp
  • onLoadContent
  • onMouseDown
  • onMouseEnter
  • onMouseLeave
  • onMouseMove
  • onMouseOut
  • onMouseOver
  • onMouseUp
  • onNodeChange
  • onObjectResizeStart
  • onObjectResized
  • onObjectSelected
  • onPaste
  • onPostProcess
  • onPostRender
  • onPreProcess
  • onProgressState
  • onRedo
  • onRemove
  • onReset
  • onSaveContent
  • onSelectionChange
  • onSetAttrib
  • onSetContent
  • onShow
  • onSubmit
  • onUndo
  • onVisualAid

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.