Quiero integrar TinyMCE 5 en Vue 3, al tiempo que permito el uso de complementos externos, en mi caso, el complemento TinyMCE MathJax .

TinyMCE y todos los complementos son autohospedados. Con este StackOverflow Post logré integrar el editor. Aún así, no puedo hacer que el complemento externo funcione únicamente siguiendo las instrucciones de uso . El botón respectivo no aparece en la barra de herramientas.
En su lugar, la consola registra 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) . Este mensaje también se registra para otros complementos predeterminados de TinyMCE e incluso para todo el editor de TinyMCE ( "http://localhost:8080/node_modules/tinymce/tinymce.min.js" ).

Parece que hago más o menos lo que sugiere esta publicación de blog (simplemente no copio el complemento en otro lugar).

¿Cómo puedo integrar complementos externos como este?

Editor.vue (Nota para importar el archivo TinyMCE JS en el encabezado de la página )

 <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>