在Vue 3中集成TinyMCE 5 与外部插件

Question

I want to integrate TinyMCE 5 into Vue 3, while allowing for the usage of external plugins, in my case the TinyMCE MathJax Plugin .

TinyMCE and all the plugins are self-hosted. With this StackOverflow Post I managed to integrate the editor. Still, I cannot get the external plugin to work solely by following the usage instructions . The respective button does not appear in the toolbar.
Instead, the console logs The resource from "http://localhost:8080/node_modules/@dimakorotkov/tinymce-mathjax/plugin.min.js" was blocked due to MIME type mismatch ("text/html", X-Content-Type-Options: nosniff) . This message is also logged for other default TinyMCE plugins and even the whole TinyMCE editor ( "http://localhost:8080/node_modules/tinymce/tinymce.min.js" )?

I seem to do pretty much what this blog post suggests (I just don't copy the plugin somewhere else).

How can I integrate external plugins like this one?

Editor.vue (Note to import the TinyMCE JS file in the page header )

<template>
  <div>
    <h1>Editor Test TinyMCE</h1>
    <Editor
      :init="{
        external_plugins: {
          'mathjax': '../@dimakorotkov/tinymce-mathjax/plugin.min.js',
        },
        mathjax: {
          lib: '../mathjax/es5/tex-mml-chtml.js',
        },
        toolbar: 'mathjax',
      }"
    />
  </div>
</template>

<script setup lang="ts">
  /**
   * Uses local TinyMCE instance, prohibits loading of cloud-hosted instance.
   * https://stackoverflow.com/questions/67425439/tinymce-vue-integration-selfhosted
   */
  import 'tinymce/tinymce'
  import 'tinymce/plugins/table'
  import 'tinymce/themes/silver'
  import 'tinymce/icons/default'
  import 'tinymce/skins/ui/oxide/skin.css'

  /**
   * Import Editor component
   */
  import Editor from '@tinymce/tinymce-vue'
</script>

Answer 1

Facing a similar issue and the blog post you linked provided the solution: move the plugin files to your dist or public folder, then provide the relative URL from the public folder within external_plugins.

So in your case (after moving the plugin files) it would read:

external_plugins: {
      'mathjax': '/public/tinymce-mathjax/plugin.min.js',
    },