从node_modules导入时Vuejs 2和tinymce无法工作

Question

我正在使用tinymce编辑器，我正在尝试在我的vuejs2项目中创建一个RichTextBox组件。

但是我遇到一个问题，当尝试从 node_modules 导入它们时，tinymce 所需的导入不起作用。我必须在项目的公共目录中创建一个tinymce目录，并从node_modules复制：（图标、模型、插件、皮肤、主题）目录。

我尝试在 vue.config.js 中为 tinymce 路径添加别名，但它什么也没做。:

  configureWebpack: {
    resolve: {
      alias: {
        'tinymce': path.resolve(__dirname, 'node_modules/tinymce')
      }
    }
  }

这是我的组件：

<template>
  <div>
    <textarea id="editor"></textarea>
  </div>
</template>

<script>
import tinymce from 'tinymce';
import 'tinymce/themes/silver/theme';
import 'tinymce/icons/default/icons';
import 'tinymce/plugins/link';
import 'tinymce/plugins/table';

export default {
  name: 'RichTextBox',
  mounted() {
    tinymce.init({
      selector: '#editor',
      plugins: ' link table',
      skin_url: '/tinymce/skins/ui/oxide',
      content_css: '/tinymce/skins/content/default',
      base_url: '/tinymce',
      promotion: false,
      paste_as_text: true,
      toolbar:
          'selectall table cut copy paste' +
          '| undo redo' +
          '| formatselect bold italic underline strikethrough sub sup ' +
          '| alignleft aligncenter alignright | alignjustify' +
          '| bullist numlist outdent indent ' +
          '| link unlink',
      table_toolbar:
          'tableprops tabledelete ' +
          '| tableinsertrowbefore tableinsertrowafter tabledeleterow ' +
          '| tableinsertcolbefore tableinsertcolafter tabledeletecol',
      entity_encoding: 'numeric',
      menubar: ''
    });
  },
  beforeDestroy() {
    const editor = tinymce.get('editor');
    if (editor) {
      editor.remove();
    }
  }
};
</script>

<style scoped>
</style>

尝试从node_modules导入时遇到的错误是：

Unexpected token '<' model.js

编辑： 包.json:

 "tinymce": "^7.1.1",
 "vue": "^2.6.14"

Answer 1

OP 从这个 Github 问题中获得了一个可行的解决方案。

目前这种设置是必要的

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

/* Required TinyMCE components */
import 'tinymce/icons/default/icons.min.js';
import 'tinymce/themes/silver/theme.min.js';
import 'tinymce/models/dom/model.min.js';

/* Import a skin (can be a custom skin instead of the default) */
import 'tinymce/skins/ui/oxide/skin.js';

/* 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';

/* content UI CSS is required */
import 'tinymce/skins/ui/oxide/content.js';

/* The default content CSS can be changed or replaced with appropriate CSS for the editor content. */
import 'tinymce/skins/content/default/content.js';
</script>