Lazy-loading TinyMCE in Vue.js

This guide shows how to self-host and lazy-load TinyMCE in 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

    • Follow the prompts and type tinymce-vue-demo as the project name.

  2. Change 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. Update App.vue with the below code snippet. Note: tinymceSrcScript references to the public tinymce using absolute root path. .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
      id="<uid>"
      licenseKey="gpl"
      // Load tinymce at run-time
      tinymce-script-src="/tinymce/tinymce.min.js"
      :init="{
        plugins: 'anchor lists advlist autolink charmap code media help',
        toolbar: 'undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
        height: 500
      }"
    />
  </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>

  5. Setup a postinstall script to copy TinyMCE to public directory after each packages installation, which makes TinyMCE available to the application as static assets.

    1. Install a library to help with copying assets.

      npm install -D fs-extra

    2. Add the following snipper to postinstall.js file.

      import fse from 'fs-extra';
import path from 'path';

const topDir = import.meta.dirname;
fse.emptyDirSync(path.join(topDir, 'public', 'tinymce'));
fse.copySync(path.join(topDir, 'node_modules', 'tinymce'), path.join(topDir, 'public', 'tinymce'), { overwrite: true });

    3. Update postinstall target in package.json to run the postinstall.js script.

      // ... other content omitted for brevity ...
"scripts": {
  "postinstall": "node ./postinstall.js"
}

  6. Exclude public/tinymce from Git tracking.

    # ... other rules omitted for brevity ...
/public/tinymce/

  7. In this instance, run the postinstall to copy TinyMCE to the public directory.

    npm run postinstall

  8. To start the development server, run:

    npm run dev

Other resources