Bundling TinyMCE with a Vue.js application

The Official TinyMCE Vue.js component integrates TinyMCE into Vue.js projects, providing a powerful WYSIWYG editor within the Vue ecosystem. This procedure creates a basic Vue.js application containing a bundled 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.

Prerequisites

This procedure requires:

Node.js LTS (recommended).
Vue CLI (optional).

Procedure

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 a Vue.js 2.x project is required, instead use:
  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.
Change into the newly created directory.
```
cd tinymce-vue-demo
```

Install the tinymce and tinymce-vue packages.

For Vue.js 3.x users:

npm install tinymce "@tinymce/tinymce-vue"

For Vue.js 2.x users:

npm install tinymce "@tinymce/tinymce-vue@^3"

(Optional) For premium plugins, install the tinymce-premium package:
```
npm install tinymce-premium@^8.3
```
For more information, see: Installing premium plugins.

For information on configuring premium plugins when bundling, see: Using premium plugins.

Using a text editor, create src/editor.js and set the contents to:

// Add the @tinymce/tinymce-vue wrapper to the bundle
import Editor from '@tinymce/tinymce-vue';

// TinyMCE so the global var exists
import 'tinymce/tinymce';
// DOM model
import 'tinymce/models/dom/model';
// Theme
import 'tinymce/themes/silver';
// Toolbar icons
import 'tinymce/icons/default';
// Editor styles
import 'tinymce/skins/ui/oxide/skin.min.css';

// Import plugins
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/autolink';
import 'tinymce/plugins/link';
import 'tinymce/plugins/image';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/table';
import 'tinymce/plugins/code';
import 'tinymce/plugins/help';
import 'tinymce/plugins/wordcount';

// Import premium plugins from NPM
import 'tinymce-premium/plugins/advcode';
import 'tinymce-premium/plugins/tinycomments';
// Always include the licensekeymanager plugin when using premium plugins with a commercial license.
import 'tinymce-premium/plugins/licensekeymanager';

// Content styles, including inline UI like fake cursors
import 'tinymce/skins/content/default/content.js';
import 'tinymce/skins/ui/oxide/content.js';

// Export Editor component for use in Vue components
export default Editor;

Using a text editor, open src/App.vue and replace the contents with:

<template>
  <div>
    <h1>TinyMCE Vue Demo</h1>
    <Editor
      v-model="content"
      :init="editorConfig"
      license-key="gpl"
    />
  </div>
</template>

<script>
import Editor from './editor.js';

export default {
  name: 'App',
  components: {
    Editor
  },
  data() {
    return {
      content: '<p>This is the initial content of the editor.</p>',
      editorConfig: {
        height: 500,
        plugins: 'advlist autolink lists link image table code help wordcount',
        toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright | bullist numlist | help'
      }
    };
  }
};
</script>

Run the development server:
```
npm run dev
```
The development server uses Vite to bundle your application on-the-fly. Vite processes all the import statements and includes the TinyMCE modules in the development bundle.
Build the application for production:
```
npm run build
```
This command creates an optimized production bundle in the dist directory.
Preview the production build:
```
npm run preview
```
Update the license-key property in the editor component and include your License Key.

Next Steps

For information on bundling, see: Introduction to bundling TinyMCE
For examples of the TinyMCE integration, see: the tinymce-vue storybook.
For information on customizing:
- TinyMCE integration, see: Vue.js framework Technical Reference.
- TinyMCE, see: Basic setup.
- The Vue.js application, see: the Vue.js documentation.