How to add a custom TinyMCE plugin with Vue3 (Nuxt) using the PluginManager

Question

I have a Nuxt3 app with TinyMCE for which I already created a standalone plugin for inserting LaTeX that works (latex.min.js).

Is it possible to create a TinyMCE plugin that interacts with my web app instead of being a standalone package in the public folder? Specifically, I want to create a glossary plugin that inserts words from a list in my app.

I am trying to insert my latex plugin through Vue as a test by following this blog post (outdated?) but it doesn't work. I used window.tinymce.PluginManager.add() but nothing shows up and I don't get any warning or error.

I need interactivity between my web app and the plugin

Here is my code:

<template>
[...]
      <tinymce-editor
        api-key="someKey"
        v-model="tinycontent"
        :init="tinyconfig"
      />
[...]
</template>

<script>
import Editor from "@tinymce/tinymce-vue";

export default {
  components: {
    "tinymce-editor": Editor,
  },
  data() {
    return {
      tinycontent: '',
      tinyconfig: {
        toolbar: "bold italic underline code | latex",
        plugins: "lists link image table code help wordcount",
        selector: "textarea",
        content_css:
          "https://cdn.jsdelivr.net/npm/katex@0.16.6/dist/katex.min.css",
        setup: () => {
          window.tinymce.PluginManager.add("latex", latex);
        },
      },
    };
  },
  computed: {},
  methods: {},
  mounted() {},
};
</script>

luxor37 · Answer 1 · 2023-05-08T19:48:43.753

Solution:

I finally found out how to add my plugin using the TinyMCE API. The value of tinyconfig in my question is almost good. I needed to add -latex to the plugins:

plugins: "lists link image table code help wordcount -latex",

I also needed to load the tinyMCE script in <head> through my nuxt.config.ts. Not my preferred way of doing this, but according to tinyMCE doc I need to reference the node_modules tinyMCE folder. I went for a quick solution to test and simply copied the whole folder to public/ (If anyone has a better solution, let me know)

I removed the window. from setup to directly reference the tinyMCE script from <head> :

setup: () => {
    tinymce.PluginManager.add("latex", latex);
}

Also, a bit of information missing from my question is that the latex object in PluginManager.add("latex", latex); is my plugin from a js script in composables

export const latex = (editor: Editor, url: string): void => {...}

I also moved my TinyMCE config to tinymce.config.ts at the root of the project to keep the code cleaner.

Result

/pages/index.vue:

<template>
  <tinymce-editor
    api-key="somekey"
    v-model="tinycontent"
    :init="tinyconfig"
  />
</template>

<script>
import Editor from "@tinymce/tinymce-vue";
import { demo_content, tinyconfig } from "~/tinymce.config";

export default {
  components: {
    "tinymce-editor": Editor,
  },
  data() {
    return {
      tinycontent: demo_content,
      tinyconfig: tinyconfig,
    };
  },
  computed: {},
  methods: {},
  mounted() {},
};
</script>

/tinymce.config.ts:

const tinyconfig = {
    toolbar: "bold italic underline code | latex",
    plugins: "lists link image table code help wordcount -latex",
    menubar: '',
    min_height: 500,
    selector: "textarea",
    content_css: "https://cdn.jsdelivr.net/npm/katex@0.16.6/dist/katex.min.css",
    extended_valid_elements: "span[class|style]",
    setup: () => {
        tinymce.PluginManager.add("latex", latex);
    }
}

const demo_content = ``;

export { demo_content, tinyconfig }

/composables/latex.ts

import { Editor, TinyMCE } from 'tinymce';

export const latex = (editor: Editor, url: string): void => {...}

/nuxt.config.ts:

export default defineNuxtConfig({
    [...]
    app: {
        head: {
            [...]
            script: [
                { src: "https://cdn.jsdelivr.net/npm/katex@0.16.6/dist/katex.min.js", defer: true, integrity: "sha384-j/ZricySXBnNMJy9meJCtyXTKMhIJ42heyr7oAdxTDBy/CYA9hzpMo+YTNV5C+1X", crossorigin: "anonymous" },
                { src: "/tinymce/tinymce.min.js", referrerpolicy: "origin" },
            ]
        },
    },
    [...]
})

How to add a custom TinyMCE plugin with Vue3 (Nuxt) using the PluginManager

1 Answers1

Solution:

Result