Search code examples
javascriptvue.jsvuejs3tinymce

Tinymce selfhosted with Vue 3 fails to load styles

I am trying to set up TinyMCE in self-hosted mode, in a Vue3 + webpack app.

I have installed tiny using the following npm coomands:

npm install tinymce@^5
npm install "@tinymce/tinymce-vue@^4"

So far, the editor component works but not all styles and some plugins are not loaded, giving the following errors in console:

"Refused to execute script from 'http://localhost:8100/js/plugins/link/plugin.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled."

"Refused to apply style from 'http://localhost:8100/js/skins/ui/oxide/skin.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled."

My guess would be that I am either not importing correctly or not doing the init correctly?

Console: browser console screenshot

EditorComponent.vue

<template>
  <page-component>
    <header-component />
    <content-component>
      <editor
        tinymce-script-src="assets/tinymce.min.js"
        v-model="content"
        :init="init"
      />
    </content-component>
  </page-component>
</template>

<script>
import "tinymce/tinymce";
import "tinymce/skins/ui/oxide/skin.css";
import "tinymce/themes/silver";
import "tinymce/icons/default";

/* Import plugins */
import "tinymce/plugins/advlist";
import "tinymce/plugins/autolink";
import "tinymce/plugins/lists";
import "tinymce/plugins/image";
import "tinymce/plugins/charmap";
import "tinymce/plugins/print";
import "tinymce/plugins/preview";
import "tinymce/plugins/anchor";
import "tinymce/plugins/searchreplace";
import "tinymce/plugins/visualblocks";
import "tinymce/plugins/code";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/insertdatetime";
import "tinymce/plugins/media";
import "tinymce/plugins/table";
import "tinymce/plugins/paste";
import "tinymce/plugins/help";
import "tinymce/plugins/wordcount";

import Editor from "@tinymce/tinymce-vue";

import HeaderComponent from "../components/HeaderComponent.vue";

export default {
  name: "Editor",
  components: {
    Editor,
    HeaderComponent,
  },
  data() {
    return {
      content: "",
      init: {
        height: 500,
        menubar: false,
        plugins: [
          "advlist autolink lists link image charmap print preview anchor",
          "searchreplace visualblocks code fullscreen",
          "insertdatetime media table paste help wordcount",
        ],
        toolbar:
          "undo redo | formatselect | bold italic backcolor | \
           alignleft aligncenter alignright alignjustify | \
           bullist numlist outdent indent | removeformat | help",
      },
    };
  },
};
</script>
Solution

  • Found a solution, for anyone who has the same issue:

    It seems that tynimce.js tries to load some extra styles by path, which does not quite work with webpack. Fortunately, as per documentation, an option is provided to disable this behavior, and load the styles from strings.

    So here is how I got rid of the errors:

    EditorComponent.vue

    ....
// Added the following missing imports

/* content UI CSS is required */
import contentUiSkinCss from "tinymce/skins/ui/oxide/content.css";

/* The default content CSS can be changed or replaced with appropriate CSS for the editor content. */
import contentCss from "tinymce/skins/content/default/content.css";

// Missing plugin
import "tinymce/plugins/link";

export default {
  name: "Editor",
  components: {
    Editor,
    HeaderComponent,
  },
  data() {
    return {
      content: "",
      init: {
        height: 500,
        plugins: [
          "advlist autolink lists link image charmap print preview anchor",
          "searchreplace visualblocks codesample fullscreen",
          "insertdatetime media table paste help wordcount",
        ],
        toolbar:
          "undo redo | codesample | formatselect | bold italic backcolor | \
           alignleft aligncenter alignright alignjustify | \
           bullist numlist outdent indent | removeformat | help",
        skin: false,          // disable import of skins
        content_css: false,   // disable import of css
        content_style:
          contentUiSkinCss.toString() + "\n" + contentCss.toString(),  // add styles as strings
      },
    };
  },
};