记一次Vue-cli2.0项目本地使用tinymce富文本编辑器遇到的问题以及解决办法

没有去购买tinymce富文本编辑器的服务，直接使用在线的会出现恼人的提示信息，配置域名后，也会出来，所以打算重新在本地使用，包括插件（上传文件）部分

1. 本地环境

   vue-cli2.0， node版本10.17.0，打包工具gulp
   

2. 下载tinymce安装包

   npm i tinymce --save-dev
   

3. 在node_modules依赖包中的tinymce文件下的skins目录放到static目录下面

4. 本地使用

   // 在所需要的项目文件中引入
       import tinymce from "tinymce/tinymce";
       import "tinymce/themes/silver/theme";
       import Editor from "@tinymce/tinymce-vue";
       
   // 配置
       editConfig: {
           height: 440, //富文本高度
           language_url: lanuage, //中文包
           language: "zh_CN", // 中文
           skin_url: "../../../../../static/tinymce/skins/ui/oxide",
           ...
       }
   
   这个地方遇到一个坑，就是指定skin_url文件下面的文件路径，不指定路径的话，会报错，无法解析css文件。
   根据指定下面的css文件，指定目录即可。（不同版本的tinymce可能会不同）语言包路径直接写即可
   
   指定完成后，发现本地运行没问题，但部署到测试、正式环境后出现文件找不到，发现是跳了一层打包目录，
   导致文件会获取不到。
   
   我的解决办法是，通过import将需要的文件，引入到项目中（gulp打包的不是很懂，所以没有去修改打包的配置）
   
   

5. 上传文件、视频、图片等功能

       // 图片
       images_upload_handler: (blobInfo, success, failure) => {
          
       },
       // 文件
       file_picker_callback: (callback, value, meta) => {
          if (meta.filetype === "file") {
            callback("https://www.baidu.com/img/bd_logo1.png", {
              text: "My text",
            });
          }
          if (meta.filetype === "image") {
            let input = document.createElement("input"); //创建一个隐藏的input
            input.setAttribute("type", "file");
            input.setAttribute("accept", ".png,.jpg,jpeg,.gif");
            let that = this;
            input.onchange = function () {
              
            };
            //触发点击
            input.click();
          }
          if (meta.filetype === "media") {
            let input = document.createElement("input"); //创建一个隐藏的input
            input.setAttribute("type", "file");
            input.setAttribute("accept", ".mp4");
            let that = this;
            input.onchange = function () {
              
            };
            //触发点击
            input.click();
          }
   

6. 前端小白，只是学习记录，希望对大家有帮助（不喜勿喷！！！！！！！！！！）