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[bot]]

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.

[mryellow]

Be aware that they have attempted to prevent this in the past by building in errors.

Seems it does work again for the moment.

[tiny-stale-bot]

This issue is stale because it has been open 30 days with no activity. Please comment if you wish to keep this issue open or it will be closed in 7 days.

[tiny-stale-bot]

This issue was closed because it has been stalled for 7 days with no activity.

[mryellow]

Bump.

[danoaky-tiny]

Just to clarify: when using TinyMCE v7, you need either an API key for cloud-hosting, or a license key for self hosting (set 'gpl' or provide a valid TinyMCE license key).

Unfortunately the Vue TinyMCE docs haven't yet been updated to reflect these changes but it's been logged internally to do soon.

If you need more info on anything specific, let us know.

It might also be beneficial to read the React, Angular or Svelte TinyMCE docs for self-hosting guides, such as https://www.tiny.cloud/docs/tinymce/latest/react-zip-host/

[mryellow]

Unfortunately the Vue TinyMCE docs haven't yet been updated to reflect these changes but it's been logged internally to do soon.

...

What is the expected behavior?

No warning should be displayed for self-hosted TinyMCE

It should default to 'gpl' if that is a requirement for normal usage.

Normal being self-hosted, as it has been for 2 decades.

[danoaky-tiny]

I understand, apologies for the inconvenience. But setting the licenseKey to 'gpl' is intended to be a conscious decision made by the developer. See: https://www.tiny.cloud/docs/tinymce/latest/license-key. So for this reason there's no default for this option.

[mryellow]

It's not so much an inconvenience as a decision you've made. For obvious reasons.