Self-Hosting TinyMCE in Vue.js

TinyMCE has recently updated their policy. The free cloud version is now only free for the first 1,000 page loads, starting from May 14, 2024. Below is the email I received:

As you may recall from our previous emails, TinyMCE is launching a usage-based billing model to enforce the Editor Load limits associated with our Cloud editor subscriptions. This email serves as final notice that this change will be effective in your account for the next full monthly billing period after tomorrow, May 14, 2024.

What happens if you exceed the monthly Editor Loads limit?
If you exceed your monthly limit in the future, you will automatically be charged $40 USD for every block of 1,000 editor loads over your allocated plan limit.

This change is outrageous to me. $40 USD per 1000 page loads? The editor is part of my users “About Me” profile page, which means it gets counted every time the page is opened, not just when the editor is used 1,000 times.

Anyway, here’s a quick guide on how to get the free self-hosted version and use it in Vue.js:

First step is to download the open source self-hosted application. That was the hardest step. I went to the pricing page to download the open-source version, but the “Download Now” button leads to a registration form for the cloud version, which isn’t helpful.

However, when scrolling down further, this works:

You can download the TinyMCE here: https://www.tiny.cloud/get-tiny/

Next, I had to install the vue tiny-mce-vue component:

npm install @tinymce/tinymce-vue

And this is how I used it in my Vue component:

<template> 
    <editor
        :init="editorConfig" 
        tinymce-script-src="/vendor/tinymce/tinymce.min.js"
        v-model="form.about_text"
     ></editor> 
</template> 
<script setup> 
    import { ref } from 'vue'; 
    import Editor from '@tinymce/tinymce-vue'; 

    const form = ref({ about_text: '' }); 
    const editorConfig = { 
       selector: '#about', 
       plugins: 'code paste autoresize autosave link image textcolor colorpicker', 
       menubar: false, 
       branding: false, 
       toolbar: 'undo redo | fontsizeselect formatselect | bold italic forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent blockquote | link image media',
    }
</script>

The tinymce-script-src should point to the directory where you downloaded the open-source code (it's a folder named tinymce that contains the tinymce.min.js file).

That’s it. Hope you enjoy the free version.