[Vuejs]-TinyMCE not loaded in vue component

by

1👍

✅

Based on the error message and the code snippet provided, you’ve missed importing some critical files that TinyMCE uses, as such its trying to load the external JS files which don’t appear to exist or are being served as HTML files (potentially a 404 page).

I’d suggest reviewing the TinyMCE bundling docs further, which hold the answer here: https://www.tiny.cloud/docs/tinymce/6/introduction-to-bundling-tinymce/. So in this case, to solve the 2 errors you’re getting that should be able to be resolved by importing the model and default icon pack alongside the theme:

import tinymce from 'tinymce'
import 'tinymce/icons/default';
import 'tinymce/themes/silver';
import 'tinymce/models/dom';

Basically, TinyMCE at the very minimum needs the core, theme, skin, default icon pack and model to be able to operate (Note: the model is new in TinyMCE 6 and wasn’t needed before that). If any of those are missed then it will fail to initialize.

👤newso

2👍

Additionally, you could use the official Vue integration guide.

After installation.
Simple input the core packages:
You need both the core tinymce package and tinymce-vue installed.

import "tinymce/tinymce";
import "tinymce/themes/silver";
import "tinymce/icons/default";
import "tinymce/skins/ui/oxide/skin.css";
import <Your component name here> from "@tinymce/tinymce-vue";

And use it as a normal Vue component.

👤Cerceis

Leave a comment