VueTinymce全局引入&局部引入

项目中根据此教程来引入 http://tinymce.ax-z.cn/integrations/integrate-index.php 如下:

  • 按照如下引入后:发现打包后的app.js,非常大再加上我们的服务器拉跨,几十K的文件都下载的很慢。只能把tinymce局部引入,先保证首页加载成功:

  • 在对应的Page引入,如下一堆,引入后发现组件并没有被渲染,经过检查后发现Vue的引入不是同一个,所以只能曲线救国如下修改

// main.js: 
import Vue from 'vue'
import tinymce from 'tinymce'
import VueTinymce from '@packy-tang/vue-tinymce'
import '../../../static/js/tinymce/langs/zh_CN.js';
//样式
import "tinymce/icons/default/icons.min";

//主题
import 'tinymce/themes/silver'
// import "tinymce/tinymce.min.js";
// 扩展插件
import "tinymce/plugins/image";
import "tinymce/plugins/media";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";
import "tinymce/plugins/preview";
import "tinymce/plugins/code";
import "tinymce/plugins/link";
import "tinymce/plugins/advlist";
import "tinymce/plugins/codesample";
import "tinymce/plugins/hr";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/textpattern";
import "tinymce/plugins/searchreplace";
import "tinymce/plugins/autolink";
import "tinymce/plugins/directionality";
import "tinymce/plugins/visualblocks";
import "tinymce/plugins/visualchars";
import "tinymce/plugins/template";
import "tinymce/plugins/charmap";
import "tinymce/plugins/nonbreaking";
import "tinymce/plugins/insertdatetime";
import "tinymce/plugins/imagetools";
import "tinymce/plugins/autosave";
import "tinymce/plugins/autoresize";

Vue.use(VueTinymce)

修改代码

Vue.use(VueTinymce); 

// 换成
 created () {
  this.__proto__.constructor.use(VueTinymce)
  this.__proto__.constructor.prototype.$tinymce = tinymce;
},
posted @ 2021-05-12 15:53  古月大叔  阅读(885)  评论(0编辑  收藏  举报