'Integrate TinyMCE 5 in Vue 3 with external plugin
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>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
