Using TinyMCE from the Tiny Cloud CDN 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 and later 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. Create a new Vue project named tinymce-vue-demo using the Create Vue Tool.

    • From a command line or command prompt create a Vue.js 3.x project: tinymce-vue-demo.

      npm create vue@3
    • If you need to create a Vue.js 2.x projects instead:

      npm create vue@2
As per the Vue FAQ, Vue 2 will reach End of Life by the end of 2023.
  • Follow the prompts and type tinymce-vue-demo as the project name.

    1. Change into the newly created directory.

      cd tinymce-vue-demo
    2. 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@^5"
  • For Vue.js 2.x users:

    npm install --save "@tinymce/tinymce-vue@^3"
    1. 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>.

        For example:

        <script setup>
        import Editor from '@tinymce/tinymce-vue'
        </script>
        
        <template>
          <main id="sample">
            <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
            <Editor
              api-key="no-api-key"
              :init="{
                plugins: 'lists link image table code help wordcount'
              }"
            />
          </main>
        </template>
        
        <style scoped>
        .logo {
          display: block;
          margin: 0 auto 2rem;
        }
        
        @media (min-width: 1024px) {
          #sample {
            display: flex;
            flex-direction: column;
            place-items: center;
            width: 1000px;
          }
        }
        </style>
    2. 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 */ }" />
    3. 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 dev
  • 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