Lazy-loading TinyMCE from a .zip package in Vue.js

This guide shows how to self-host and lazy-load TinyMCE from a .zip package 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-vue package.

    • For Vue.js 3.x users:

      npm install @tinymce/tinymce-vue

    • For Vue.js 2.x users:

      npm install @tinymce/tinymce-vue@^3

  4. Unzip the content of the tinymce/js folder from the TinyMCE zip into the public folder.

  5. Update App.vue with the below code snippet. Note: tinymceSrcScript references to the public tinymce using absolute root path.

    <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"
      tinymceScriptSrc="/tinymce/tinymce.min.js"
      :init="{
        plugins: 'advlist anchor autolink code help image insertdatetime link lists media table wordcount',
        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>

  6. To start the development server, run:

    npm run dev

Other resources