富文本编辑器 - tinymce富文本开发环境没问题，打包上线报错？

Question

tinymce富文本开发环境没问题，打包上线报错

目前遇见一个抓脑问题，富文本在本地开发环境使用正常，但是打包上线后有问题，目前找不到为什么。尝试升级了一下版本，看 npm 上有3个tag版本，将 tinymce 升级到 5.10.9，但还是同样问题，求各位大佬解救

项目版本

vue: 2xtinymce: 5.4.1@tinymce/tinymce-vue: 3.2.2

线上报错提示

问题定位打包后的混淆代码

通过网上查找，混淆代码对应的应该是此处代码

组件代码

<template>  <div class="tinymce-container">    <editor      :id="tinymceId"      :value="contentValue"      @input="tinymcechange"      :init="init"    ></editor>  </div></template><script>import tinymce from 'tinymce';import Editor from '@tinymce/tinymce-vue';import 'tinymce/icons/default/icons.min.js';import 'tinymce/themes/silver/theme';import 'tinymce/plugins/image';import 'tinymce/plugins/link';import 'tinymce/plugins/code';import 'tinymce/plugins/table';import 'tinymce/plugins/lists';import 'tinymce/plugins/advlist';import 'tinymce/plugins/wordcount';import 'tinymce/plugins/directionality';import 'tinymce/plugins/hr';import 'tinymce/plugins/pagebreak';import 'tinymce/plugins/paste';import 'tinymce/plugins/searchreplace';import 'tinymce/plugins/preview';export default {  name: 'MyTinymce',  model: {    prop: 'value',    event: 'tinymcechange'  },  props: {    tinymceId: {      default: () => {        return 'tinymce';      }    },    value: {      default: () => {        return '';      }    },    tinymceHeight: {      type: Number,      default: 520    }  },  components: {    Editor  },  data() {    const _this = this;    return {      contentValue: '', // 父组件通过ref拿到该组件的值      init: {        selector: `#${this.tinymceId}`,        external_plugins: {          powerpaste: '/static/tinymce/powerpaste/plugin.min.js'        },        language_url: '/static/tinymce/langs/zh_CN.js',        body_class: 'panel-body',        language: 'zh_CN',        content_style: 'body {margin: 28px;}',        draggable_modal: true,        placeholder: '请输入详情',        skin_url: '/static/tinymce/skins/ui/oxide', // 编辑器需要一个skin才能正常工作，所以要设置一个skin_url指向之前复制出来的skin文件        height: this.tinymceHeight,        plugins: [          'image link code table lists wordcount advlist directionality hr pagebreak searchreplace preview powerpaste'        ],        toolbar: [          'fontselect fontsizeselect link lineheight forecolor backcolor bold italic underline strikethrough ltr rtl preview powerpaste | image quicklink h1 h2 h3 h4 h5 h6 blockquote table alignleft aligncenter alignright alignjustify | bullist numlist, hr, pagebreak, searchreplace bullist fullscreen'        ],        browser_spellcheck: true, // 拼写检查        branding: false, // 去水印        elementpath: false, // 禁用编辑器底部的状态栏        statusbar: false, // 隐藏编辑器底部的状态栏        paste_data_images: true, // 允许粘贴图像        file_picker_types: 'image',        // images_reuse_filename: true,        // images_upload_credentials: true,        fontsize_formats:          '12px 14px 16px 18px 20px 24px 26px 28px 30px 32px 36px', // 字体大小        font_formats:          '微软雅黑=Microsoft YaHei, Helvetica Neue; PingFang SC; sans-serif; 苹果苹方=PingFang SC, Microsoft YaHei, sans-serif; 宋体=simsun; serifsans-serif; Terminal=terminal;monaco; Times New Roman=times new roman;times',        // 图片上传三个参数，图片数据，成功时的回调函数，失败时的回调函数        images_upload_handler(blobInfo, success, failure) {          const img = 'data:image/jpeg;base64,' + blobInfo.base64();          if (_this.isFlag) {            const imgFileSize = blobInfo.blob().size;            if (imgFileSize / 1024 < 100) {              success(img);            } else {              failure('图片大小不能超过100kb');            }          } else {            success(img);          }        }      }    };  },  watch: {    value: {      handler: function (val, oVal) {        this.contentValue = val;      },      immediate: true,      deep: true    }  },  mounted() {    tinymce.init({});  },  methods: {    formaterNode(nodeList) {      for (let i = 0; i < nodeList.length; i++) {        let el = nodeList[i];        if (el.localName === 'img') {          const { naturalWidth, naturalHeight } = el;          const scale = (naturalWidth / naturalHeight).toFixed(0);          const targetWidth = naturalWidth > 200 ? 200 : 100;          const targetHeight = Math.round(targetWidth / scale);          const style = `width;${targetWidth}px;height:${targetHeight}px;`;          el.setAttribute('style', style);        }        if (el.childNodes && el.childNodes.length) {          this.formaterNode(el.childNodes);        }      }    },    tinymcechange(e) {      this.$emit('tinymcechange', e);    }  }};</script>

Answer 1

在您提供的图片中，报错信息指向了 tinymce 的初始化过程。具体来说，问题似乎出在 tinymce 试图访问一个未定义的属性或方法。

由于您已经尝试过升级 tinymce 到 5.10.9，但问题仍然存在，我们可以考虑以下几个可能的原因和解决方案：

1. 依赖冲突：确保您的项目中没有其他依赖与 tinymce 产生冲突。检查 package.json 中的其他依赖，并尝试升级或降级它们的版本，以找到可能的冲突。
2. 构建工具配置：如果您使用的是 Webpack 或其他构建工具，确保您有正确的加载器和插件配置。例如，确保您使用了合适的加载器来处理 CSS 和其他资源，并确保没有错误的插件配置。
3. 混淆代码：由于您提到了混淆代码，您可能正在使用 UglifyJS 或其他工具来压缩代码。这些工具可能会更改代码的结构，导致某些变量或方法在运行时不可用。您可以尝试禁用混淆，看看是否仍然出现问题。
4. 外部资源：确保所有外部资源（如字体、图片等）都已正确包含在打包的代码中。有时，缺少的外部资源会导致运行时错误。
5. 查看完整的错误堆栈：通常，浏览器控制台中的错误信息会提供更多关于问题的线索。检查完整的错误堆栈，以确定问题发生的确切位置。
6. 插件和扩展：如果您使用了 tinymce 的插件或扩展，请确保它们与您的 tinymce 版本兼容。有时，插件或扩展可能会导致与核心库的冲突。
7. 清除缓存和重新安装依赖：尝试删除 node_modules 文件夹和 package-lock.json 文件，然后重新运行 npm install。有时，依赖可能会损坏或不完整，导致此类问题。
8. 社区支持：考虑在 tinymce 的官方论坛或社区中提问。可能有其他开发者遇到了类似的问题，并且已经找到了解决方案。

最后，由于您提到了 Vue 和 @tinymce/tinymce-vue，请确保您正确地使用了这些库和组件，并遵循了它们的文档和指南。