将TinyMCE 5集成到带有外部插件的Vue 3中

ntjbwcob  于 2022-12-14  发布在  Vue.js
关注(0)|答案(1)|浏览(297)

我想将TinyMCE 5集成到Vue 3中,同时允许使用外部插件,在我的例子中是TinyMCE MathJax Plugin
TinyMCE和所有的插件都是自托管的。用这个StackOverflow Post我设法集成了这个编辑器。但是,我仍然不能让这个外部插件只按照使用说明来工作。相应的按钮没有出现在工具栏上。
相反,控制台会记录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")也会记录此消息?
我似乎做了很多this blog post建议的事情(我只是不把插件复制到其他地方)。
我如何集成像这样的外部插件?

Editor.vue*(注意在页眉中导入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>
6kkfgxo0

6kkfgxo01#

面对类似的问题,您链接的博客文章提供了解决方案:将插件文件移动到您的dist或公共文件夹,然后在external_plugins中提供公共文件夹的相对URL。
因此,在您的情况下(移动插件文件后),它会读:

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

相关问题