记一次Vue-cli2.0项目本地使用tinymce富文本编辑器遇到的问题以及解决办法
没有去购买tinymce富文本编辑器的服务，直接使用在线的会出现恼人的提示信息，配置域名后，也会出来，所以打算重新在本地使用，包括插件（上传文件）部分
本地环境
vue-cli2.0， node版本10.17.0，打包工具gulp 复制代码
下载tinymce安装包
npm i tinymce --save-dev 复制代码
在node_modules依赖包中的
tinymce文件下的skins目录放到static目录下面
本地使用
// 在所需要的项目文件中引入 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打包的不是很懂，所以没有去修改打包的配置） 复制代码
上传文件、视频、图片等功能
// 图片 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(); } 复制代码前端小白，只是学习记录，希望对大家有帮助（不喜勿喷！！！！！！！！！！）
作者：逆yan_
链接：https://juejin.cn/post/7018065787185266718