vite + vue3 + ts Unable to import plug-in

[Carson-czl]

If the plug-in package is imported from JS, TS will report an error

<template>
  <div>
    <editor
      v-model="editorContent"
      api-key="77uuui3ovm7pzqjyo65fpurnwhrtloz53pa3ckj50n81e69u"
      :init="editorInit"
    />
  </div>
</template>
<script lang="ts">
import Editor from '@tinymce/tinymce-vue';
import { RawEditorSettings } from 'tinymce';
import { computed, defineComponent, nextTick, reactive, ref, watch } from 'vue';

import tinymce from 'tinymce/tinymce';
import 'tinymce/themes/silver/theme.js';
import 'tinymce/icons/default/icons.js';
import from 'tinymce/plugins/lists'; // js error

export default defineComponent({
  name: 'TinymceEditor',
  components: {
    editor: Editor,
  },
  setup() {
    const isShow = ref(true);
    const editorContent = ref('');
    const editorInit = computed<RawEditorSettings>(() => {
      return {
        height: 500,
        menubar: true, // 开启菜单
        fontsize_formats: '12px 14px 18px 24px 36px 50px',
        plugins: [
          'table casechange',
          'permanentpen formatpainter charmap pagebreak link emoticons fullscreen preview print code',
          'lists',
        ],
        toolbar: [
          'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | forecolor backcolor casechange | alignleft aligncenter alignright alignjustify | outdent indent',
          'permanentpen removeformat formatpainter charmap superscript subscript | pagebreak | link emoticons | fullscreen  preview  print code',
          'lists',
        ],
      };
    });
    console.log(tinymce)
    return {
      isShow,
      editorInit,
      editorContent,
    };
  },
});
</script>

{
  "name": "vue3-ts-admin",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite --force",
    "dev:staging": "vite --mode=staging",
    "build": "vue-tsc --noEmit && vite build",
    "build:staging": "vue-tsc --noEmit && vite build --mode=staging",
    "serve": "vite preview"
  },
  "dependencies": {
    "@tinymce/tinymce-vue": "^4.0.5",
    "axios": "^0.24.0",
    "cropperjs": "^1.5.12",
    "echarts": "^5.2.2",
    "element-plus": "^1.2.0-beta.6",
    "nprogress": "^0.2.0",
    "screenfull": "^6.0.0",
    "sortablejs": "^1.14.0",
    "tinymce": "^5.10.2",
    "vue": "^3.2.16",
    "vue-i18n": "^9.2.0-beta.22",
    "vue-router": "^4.0.12",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@types/nprogress": "^0.2.0",
    "@types/sortablejs": "^1.10.7",
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vitejs/plugin-vue": "^1.9.3",
    "eslint": "^8.3.0",
    "eslint-plugin-vue": "^8.1.1",
    "prettier": "^2.5.1",
    "sass": "^1.43.5",
    "sass-loader": "^12.3.0",
    "typescript": "^4.4.3",
    "vite": "^2.6.4",
    "vite-plugin-svg-icons": "^1.0.5",
    "vue-tsc": "^0.3.0"
  }
}

[lnewson]

Hi @Carson-czl,

Firstly, there is a minor issue with the import as it should be import 'tinymce/plugins/lists';. However, I'm not convinced that's the sole issue here so I'm going to transfer this to the tinymce-vue repo where our integrations team are betted suited to help since this appears to be specific to bundling with Vue and Vite.

[exalate-issue-sync[bot]]

Ref: INT-2883

[Caesy707]

Do you have a solution to address this problem now? This problem is a confusing thing. Looking forward to your reply. thankyou!

[juliandreas]

Your imports should look something like this:

// TinyMCE
import 'tinymce/tinymce' // <---- MUST COME FIRST
import 'tinymce/icons/default/icons'
import 'tinymce/themes/silver/theme'
import 'tinymce/models/dom/model'
import 'tinymce/skins/ui/oxide/skin.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'

[bardiaabasirad]

Hi I have the same problem.

‍‍"dependencies": {
        "@tinymce/tinymce-vue": "^5.1.1",
        "tinymce": "^6.8.3",
        .............
}

I have written this code in the component:

<script setup>
//` TinyMCE
import tinymce from "tinymce";
import 'tinymce/icons/default/icons'
import 'tinymce/themes/silver/theme'
import 'tinymce/models/dom/model'
import 'tinymce/skins/ui/oxide/skin'
import 'tinymce/skins/ui/oxide-dark/content'
import 'tinymce/skins/content/dark/content'

// TinyMCE plugins
// https://www.tiny.cloud/docs/tinymce/6/plugins/
import 'tinymce/plugins/code/plugin'
import 'tinymce/plugins/directionality/plugin'
import 'tinymce/plugins/image/plugin'
import 'tinymce/plugins/link/plugin'
import 'tinymce/plugins/table/plugin'
import 'tinymce/plugins/fullscreen/plugin'
import 'tinymce/plugins/charmap/plugin'
import 'tinymce/plugins/pagebreak/plugin'
import 'tinymce/plugins/nonbreaking/plugin'
import 'tinymce/plugins/anchor/plugin'
import 'tinymce/plugins/advlist/plugin'
import 'tinymce/plugins/lists/plugin'
import '@/js/tinymce/fa'

const options = reactive({
    directionality : 'rtl',
    language: 'fa',
    plugins: 'code directionality fullscreen image link table charmap pagebreak nonbreaking anchor advlist lists',
    toolbar: 'fullscreen | bold italic underline strikethrough | rtl ltr | fontsize | alignright aligncenter alignleft  alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | charmap | image link',
    menubar: 'edit view insert format table',
    font_formats: 'IRANSans=IRANSans; Andale Mono=andale mono,times; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Book Antiqua=book antiqua,palatino; Comic Sans MS=comic sans ms,sans-serif; Courier New=courier new,courier; Georgia=georgia,palatino; Helvetica=helvetica; Impact=impact,chicago; Oswald=oswald; Symbol=symbol; Tahoma=tahoma,arial,helvetica,sans-serif; Terminal=terminal,monaco; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva; Webdings=webdings; Wingdings=wingdings,zapf dingbats',
    extended_valid_elements:'svg[*],path[*]',
    image_advtab: true,
    image_class_list: [
        { title: 'None', value: '' },
        { title: 'w-full', value: 'w-fu11' },
    ],
    height: 500,
    toolbar_mode: 'sliding',
    skin: document.getElementsByTagName('html')[0].classList.contains('dark') ? 'oxide-dark' : 'oxide',
    content_css: document.getElementsByTagName('html')[0].classList.contains('dark') ? 'dark' : 'default',
    content_style: 'body { font-size:16px }',
});

let props = defineProps({
    mag: Object,
    errors: Object,
});

let form = reactive({
    content: props.mag.content,
});
</script>
<template>
<Editor id="body" v-model="form.content" api-key='my-api-key' :init="options" />
</template>