'TinyMCE Vue Integration SelfHosted

I have a problem with the integration of TinyMCE in a Vue project. The Official TinyMCE Vue.js component (tinymce-vue) works but is only a gateway to request the sources via CDN.

I want to have a self hosted version, but in no case download the sources directly. The tinymce package via npm does not interface properly with Vue.

import tinymce from "tinymce/tinymce";

tinymce.init({ selector: "textarea"}); throws an error :

Uncaught SyntaxError: expected expression, got '<' theme.js:1

I have a textarea in the template

How can I fix this problem? Thanks

vue.jsnpmtinymce


Solution 1:[1]

I found the solution

Tinymce-vue package loads tinymce from cloud if tinymce was not included in the project.

import "tinymce/tinymce";
import "tinymce/themes/silver";
import "tinymce/icons/default";
import "tinymce/skins/ui/oxide/skin.css";

import Editor from "@tinymce/tinymce-vue";

To load local setup of tinymce editor.

Editor component will also be available

Solution 2:[2]

 /* Import TinyMCE */
 import tinymce from 'tinymce';

 /* Default icons are required for TinyMCE 5.3 or above */
 import 'tinymce/icons/default';

 /* A theme is also required */
 import 'tinymce/themes/silver';

 /* Import the skin */
 import 'tinymce/skins/ui/oxide/skin.css';

 /* Import plugins */
 import 'tinymce/plugins/advlist';
 import 'tinymce/plugins/code';
 import 'tinymce/plugins/emoticons';
 import 'tinymce/plugins/emoticons/js/emojis';
 import 'tinymce/plugins/link';
 import 'tinymce/plugins/lists';
 import 'tinymce/plugins/table';

 /* Import premium plugins */
 /* NOTE: Download separately and add these to /src/plugins */
 /* import './plugins/checklist/plugin'; */
 /* import './plugins/powerpaste/plugin'; */
 /* import './plugins/powerpaste/js/wordimport'; */

 /* Import content css */
 import contentUiCss from 'tinymce/skins/ui/oxide/content.css';
 import contentCss from 'tinymce/skins/content/default/content.css';

 /* Initialize TinyMCE */
 export function render () {
   tinymce.init({
     selector: 'textarea#editor',
     plugins: 'advlist code emoticons link lists table',
     toolbar: 'bold italic | bullist numlist | link emoticons',
     skin: false,
     content_css: false,
     content_style: contentUiCss.toString() + '\n' + contentCss.toString(),
   });
 };

More info here: https://www.tiny.cloud/docs/advanced/usage-with-module-loaders/webpack/webpack_es6_npm/#procedure

Whole Vue 3 + TinyMCE 6 example:

<template>
  <editor :init="init" />
</template>

<script>
import { defineComponent } from 'vue'

// TinyMCE
import 'tinymce/tinymce'
import 'tinymce/icons/default/icons'
import 'tinymce/themes/silver/theme'
import 'tinymce/models/dom/model'
import 'tinymce/skins/ui/oxide/skin.css'
import contentUiCss from 'tinymce/skins/ui/oxide/content.css';

// TinyMCE plugins
// https://www.tiny.cloud/docs/tinymce/6/plugins/
import 'tinymce/plugins/lists/plugin'
import 'tinymce/plugins/link/plugin'
import 'tinymce/plugins/image/plugin'
import 'tinymce/plugins/table/plugin'
import 'tinymce/plugins/code/plugin'
import 'tinymce/plugins/help/plugin'
import 'tinymce/plugins/wordcount/plugin'

import Editor from '@tinymce/tinymce-vue'

export default defineComponent({
  name: 'App',
  components: {
    'editor': Editor
  },
  setup () {
    return {
      init: {
        skin: false,
        plugins: 'lists link image table code help wordcount',
        content_css: false,
        content_style: contentUiCss.toString(),
      },
    }
  }
})
</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
Solution 1
Solution 2 mspiderv

Related Questions