API key warning on self-hosted TinyMCE

[cwinters8]

I am just getting started with TinyMCE and planning to self-host, not use the cloud offering. I'm getting a warning (detailed below) about an API key when the editor loads.

I have both @tinymce/tinymce-vue and tinymce installed, which seems to be the difference between self-hosted and cloud installation in the docs

Self-hosted:

Cloud:

When I searched this warning in the docs, it seems to be related to using the cloud offering: Cloud troubleshooting

Does this mean TinyMCE can't be used without an API key from the cloud starting this year? Or is there some piece of configuration I'm missing to indicate this is self-hosted?

What is the current behavior?

When I use this package without an API key, I see this warning about needing a valid API key:

Please provide the steps to reproduce and if possible a minimal demo of the problem via codesandbox.io or similar.

Install @tinymce/tinymce-vue and tinymce

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

Create an Editor without using an API key

<Editor :init="{ height: '100vh' }"><h1>Hello, Webster!</h1></Editor>

Demo on Replit

What is the expected behavior?

No warning should be displayed for self-hosted TinyMCE

Which versions of TinyMCE, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE or tinymce-vue?

MacOS with FireFox and Edge for sure, but I don't have an easy way to test others. I suspect this is unrelated to specific browsers or operating systems.

"dependencies": {
  "@tinymce/tinymce-vue": "^5.1.1",
  "tinymce": "^6.8.2",
  "vue": "^3.2.37"
},

[exalate-issue-sync]

Ref: INT-3286

[cwinters8]

FWIW my first step with TinyMCE was not using Vue, and I didn't see the warning there. Here's an example with that configuration: Replit demo. Note that I just copied tinymce.min.js straight from my repo for that example, so it hasn't been updated since I added it there on 2023-12-31.

Edit: I just validated a fresh install of tinymce yields the exact same tinymce.min.js so it doesn't seem to have been updated since I added it.

[cwinters8]

I think I figured it out. This step about bundling in the self-hosted Vue doc was sort of confusing

I updated the setup script to import tinymce itself and the associated plugins, themes, etc based on the Vite bundling doc

<script setup>
import 'tinymce'
import Editor from "@tinymce/tinymce-vue"

/* Required TinyMCE components */
import 'tinymce/icons/default/icons.min.js';
import 'tinymce/themes/silver/theme.min.js';
import 'tinymce/models/dom/model.min.js';

/* Import a skin (can be a custom skin instead of the default) */
import 'tinymce/skins/ui/oxide/skin.js';

/* Import plugins */
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/code';
import 'tinymce/plugins/emoticons';
import 'tinymce/plugins/emoticons/js/emojis';
import 'tinymce/plugins/link';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/table';

/* content UI CSS is required */
import 'tinymce/skins/ui/oxide/content.js';

/* The default content CSS can be changed or replaced with appropriate CSS for the editor content. */
import 'tinymce/skins/content/default/content.js';
</script>

And now the warning is gone

Updated demo in Replit

So I think I'm set for now, but I wonder if the bundling section of the self-hosted Vue install documentation could be updated to make it clear that you have to add some additional imports beyond what's in the bundling example currently, which amounts to

import { Editor } from '@tinymce/tinymce-vue';

I also think the warning about not bundling tinymce and tinymce-vue with a module loader is very confusing in the context of describing how to bundle those two packages with a module loader. I was sort of thrown off by it. Perhaps a more specific description of the problem and any alternative solutions would be helpful.