Vue and TinyMCE Issue - vue.js

Question

I am trying to integrate a TinyMCE editor into my Vue application. From the Developer Tools Console I am able to access the tinymce object and manipulate it. For example:
tinymce.activeEditor.selection.setContent('I am a replacement')
The above code will replace the selected text within the TinyMCE editor. I want to work with the tinymce object from within Vue (in multiple components) but I am not sure how to access it. The exact error I get when I enter the above code into a function is: error 'tinymce' is not defined no-undef.
Any help would be much appreciated. Thank you.

Answer 1

Without seeing any code at all it is hard to say exactly why this is happening. Documenting how you are instantiating TinyMCE would help.
Based on the error message I would assume that you are using the TinyMCE Vue component/wrapper to inject TinyMCE into your Vue component. By default that does not actually load the core TinyMCE editor until run-time - and at that time it loads thing via the TinyMCE Cloud server.
The error you are seeing is your linting tool (eslint?) complaining that you are trying to call a variable tinymce but that variable is not defined anywhere.
There are a few ways you could choose to "fix" eslint complaining:
1 - Access tinymce through the global window object:
window.tinymce
2 - Wrap your code with a directive for eslint to not check for undefined variables:
/*eslint-disable no-undef*/
...
/*eslint-enable no-undef*/
https://eslint.org/docs/user-guide/configuring#disabling-rules-with-inline-comments
3 - Define a global in your .eslintrc file
{
"globals": {
"tinymce": true
}
}
https://eslint.org/docs/user-guide/configuring#specifying-globals