1

I'm following the official doc to integrate TinyMCE with Vue2. The editor is loaded successfully with basic configuration. But the link and table are not working as expected. So I installed tinymce(5.10.3) package and imported the plugins as follows:

import 'tinymce/plugins/table'
import 'tinymce/plugins/link'

But there's the error occurred and the editor is failed to load. Uncaught ReferenceError: tinymce is not defined

What's the possible cause of this?

Sky
  • 7,343
  • 8
  • 31
  • 42
  • Have you imported TinyMCE itself and other required components for bundling as per https://www.tiny.cloud/docs/advanced/usage-with-module-loaders/webpack/webpack_es6_npm/? – newso Jul 23 '22 at 23:30
  • @newso yes, that's the weird part. And there's no saying the `tinymce` itself should be imported while using `tinymce-vue` according to the doc. These are the version I used: `"@tinymce/tinymce-vue": "^3"`, `"tinymce": "^5.10.3"` – Sky Jul 25 '22 at 04:17
  • @newso I thought they are not working because I didn't import the plugins, so I tried to import them and installed `tinymce` as dependency, but this error occurred when I imported the plugins. – Sky Jul 25 '22 at 04:18
  • You only need to import the plugins when using a self-hosted version with bundling. If you're using Tiny Cloud, which is the default, or are hosting the TinyMCE files elsewhere then you should only need to specify them in the `plugins` option. If you remove the imports do you get any console errors or warnings? – newso Jul 25 '22 at 21:23
  • @newso When I tried to import the plugins, there's the error that `tinymce` is not defined. I'm following [this link](https://www.tiny.cloud/docs/integrations/vue/), the setction 'Installing the TinyMCE Vue.js integration using NPM'. – Sky Jul 26 '22 at 03:33
  • I fixed `tinymce is not fined` by importing it `import tinymce from 'tinymce'` and called the init function on mounted like this: `tinymce.init({})`. But the link and table are still not working. – Sky Jul 29 '22 at 01:38

0 Answers0