tinymce富文本开发环境没问题,打包上线报错
目前遇见一个抓脑问题,富文本在本地开发环境使用正常,但是打包上线后有问题,目前找不到为什么。尝试升级了一下版本,看 npm
上有3个tag版本
,将 tinymce
升级到 5.10.9
,但还是同样问题,求各位大佬解救
项目版本
vue: 2x
tinymce: 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>