Unable to load tinymce myself vs. cloud

I’ve got tinymce loading outside of a vue component via the tinymce npm package, ie.

import tinymce from 'tinymce/tinymce';
import 'tinymce/themes/modern/theme';

import 'tinymce/plugins/paste';
import 'tinymce/plugins/media';
import 'tinymce/plugins/textcolor';
import 'tinymce/plugins/lists';
import 'tinymce-line-height-plugin/lineheight/plugin';
import 'tinymce/plugins/link';
import 'tinymce/plugins/table';
import 'tinymce/plugins/hr';
import 'tinymce/plugins/print';
import 'tinymce/plugins/autosave';
import 'tinymce/plugins/fullscreen';
import 'tinymce/plugins/image';

tinymce.init({
    selector: '.tinymce',
    theme: 'modern',
    menubar: false,
    plugins: ['paste', 'image', 'media', 'textcolor', 'lists', 'lineheight', 'link', 'table', 'hr', 'print', 'autosave', 'fullscreen', 'image'],
    skin_url: '/tinymce/skins/lightgray',
    branding: false,
    toolbar: [
        'bold italic underline removeformat | strikethrough superscript subscript | fontsizeselect | backcolor | bullist numlist | styleselect | lineheightselect',
        'link image media table hr | fullscreen undo redo print restoredraft'
    ]
});

but when I try to use <editor> with a Vue component with something like:

<editor id="evidence-editor" class="tinymce">

tinymce-vue isn’t detecting that I’m attaching tinymce myself via the class. Also tried changing the selector to use the evidence-editor ID instead, but regardless it’ll attached tinymce twice with one displaying the This domain is not registered with TinyMCE Cloud" error. I even tried setting window.tinymce = tinymce to satisfy the getTinymce function within tinymce-vue.js.

Is there something I’m missing to be able to load tinymce myself via the npm package?

[brianhogg]

Looks like that did the trick, along with ensuring the module/plugin is loaded before Vue is initialized. Thanks!

[fyrkant]

I think you need to change the

import tinymce from 'tinymce/tinymce';

to

import 'tinymce';

to make it global.