Using the TinyMCE .zip package with the Vue.js framework

The Official TinyMCE Vue.js component integrates TinyMCE into Vue.js projects. This procedure creates a basic Vue.js application containing a TinyMCE editor.

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 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 Node.js (and npm).

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
            :init="{
              plugins: 'lists link image table code help wordcount'
            }"
          />
        </div>
      </template>
      
      <script>
      import Editor from '@tinymce/tinymce-vue'
      
      export default {
        name: 'app',
        components: {
          'editor': Editor
        }
      }
      </script>
  6. TinyMCE can be self-hosted by either: Deploying TinyMCE independent of the Vue.js application, or Bundling TinyMCE with the Vue.js application.

    • Deploying TinyMCE independent of the Vue.js application. To use a TinyMCE instance that has been deployed independent of the Vue.js application, use an HTML <script> tag.

      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 example create a Vue.js application, add the script to /path/to/tinymce-vue-demo/public/index.html.

    • Bundle TinyMCE with the Vue.js application using a module loader (such as Webpack).

      Tiny does not recommend bundling tinymce and tinymce-vue with a module loader. Bundling these packages can be complex and error prone.

      To bundle TinyMCE using a module loader (such as Webpack, Rollup, or Browserify), import or require the tinymce package, followed by the tinymce-vue package, then the other required TinyMCE-related imports.

      Example of bundling:

      /* Add the tinymce-vue wrapper to the bundle */
      import { Editor } from '@tinymce/tinymce-vue';
      /* For instructions on bundling TinyMCE, see the Bundling TinyMCE documentation. */

      For instructions on bundling TinyMCE, see: Bundling TinyMCE.

  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