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

Question

我想將 TinyMCE 5 集成到 Vue 3 中，同時允許使用外部插件，在我的例子中是TinyMCE MathJax 插件。

TinyMCE，所有插件都是自托管的。 通過這篇StackOverflow 帖子，我設法集成了編輯器。 盡管如此，我仍然無法僅按照使用說明使外部插件正常工作。 相應的按鈕不會出現在工具欄中。
相反，控制台記錄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) 。 其他默認 TinyMCE 插件甚至整個 TinyMCE 編輯器（ "http://localhost:8080/node_modules/tinymce/tinymce.min.js" ）也會記錄此消息？

我似乎做了很多這篇博文所建議的事情（我只是不將插件復制到其他地方）。

我怎樣才能集成這樣的外部插件？

Editor.vue （注意在header頁面導入TinyMCE的JS文件）

<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

面對類似的問題，您鏈接的博客文章提供了解決方案：將插件文件移動到您的 dist 或公共文件夾，然后從 external_plugins 中的公共文件夾提供相對 URL。

因此，在您的情況下（移動插件文件后），它將顯示為：

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