Bundling TinyMCE in Vue.js

This guide shows how to bundle TinyMCE into a Vue.js application using the TinyMCE Vue.js component.

Prerequisites

This procedure requires:

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

  2. Go into the newly created directory.

    cd tinymce-vue-demo

  3. 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"

  4. Create src/editor.js and set the contents to:

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

// Ensure you import TinyMCE to register the global variable required by other components
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';
// Include resources that a plugin lazy-loads at the run-time
import 'tinymce/plugins/help/js/i18n/keynav/en.js';
import 'tinymce/plugins/wordcount';

// 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;

  5. Update src/App.vue to import and configure Editor.

    <template>
  <div>
    <h1>TinyMCE Vue Demo</h1>
    <Editor
      v-model="content"
      :init="editorConfig"
      licenseKey="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>

  6. To start the development server, run:

    npm run dev

Other resources