Using Tinymce with VueJS 3 and Vite

TinyMCE is a nice wysywig editor, and in my experience, is more performant with large, rich text content than Quill, which is the default editor used by the Primevue framework.

If you want to use TinyMCE with your VueJS 3 project, unfortunately, the documentation is not very great about how to do this. Here is what worked for me (using the composition API).

Install Dependencies

It is important to install tinyMCE and tinyMCE-vue exactly as follows:

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

After it is installed, then you need to load TinyMCE and TinyMCE-vue in your component in a specific order, otherwise it will load the cloud version, which requires a License key.

If you have the means to support the project, please do so, but it is a little annoying that it is difficult to use the GPL version of the library without inadvertently loading the cloud version.

<script setup>
//import the usual components you're using, including Vue
//... then import the tinymce bits like so:
import tinymce from "tinymce";
import "tinymce/icons/default/icons.min.js";
import "tinymce/themes/silver/theme.min.js";
import "tinymce/models/dom/model.min.js";
import "tinymce/skins/ui/oxide/skin.js";

import "tinymce/skins/ui/oxide/content.js";

import "tinymce/skins/content/default/content.js";


import "tinymce/skins/ui/oxide/content.js";
import Editor from "@tinymce/tinymce-vue";
</script>

<template>
<Editor v-model:visible="modalContent"
        :init="{promotion: false, branding: false, license_key: 'gpl', height: '400px',
        skin: 'oxide', skin_url: 'default' }"
    ></Editor>
</template>

That should render a tinyMCE editor in your vue js component. Some more information can be found here: https://www.tiny.cloud/docs/tinymce/latest/vite-es6-npm/