VUE配置uEditor注意事项(主要是ZeroClipboard not defined)

具体怎么初步引用请移步官方文档

OR npm上的vue-ueditor文档

这里只说明引用注意事项和本人引入时踩到的一些坑

  • 本人的项目目录结构如下:
  • 《VUE配置uEditor注意事项(主要是ZeroClipboard not defined)》
  • components下是本人习惯性封装的组件,也是按需引入的地方,不推荐在main.js中引入所有依赖,前端盆友一定要养成按需引入和懒加载的好习惯(当然也不是万能的,视实际情况)
  • uEditor的包文件一般放在static目录下
  • 需要在ueditor.config.js配置文件中加上这句话,官方注释也写的很清楚了
  • 《VUE配置uEditor注意事项(主要是ZeroClipboard not defined)》
  • 特别注意路径最后的/
  • 接下来不需要使用上传图片功能的同学需要把这里注释掉
  • 《VUE配置uEditor注意事项(主要是ZeroClipboard not defined)》
  • 当然,按需重定义配置的时候也不要有server这项
  • 《VUE配置uEditor注意事项(主要是ZeroClipboard not defined)》

接下来如果你报错

  • 《VUE配置uEditor注意事项(主要是ZeroClipboard not defined)》
  • 请检查你是否引入了/lang/zh-cn/zh-cn语言文件以及引入顺序是否是config.js–>all.js–>zh-cn–>parse
  • 如果下一步你报错
  • 《VUE配置uEditor注意事项(主要是ZeroClipboard not defined)》
  • 并且尝试过将ZeroClipboard.js源码
  • 《VUE配置uEditor注意事项(主要是ZeroClipboard not defined)》
  • (意思就是说检测当前环境,如果是AMD环境,则以AMD规则暴露模块,如果是CommonJS环境,则以CommonJS规则暴露模块,本人使用的是node环境,即CommonJS)
  • 强行全局暴露ZeroClipboard改成如下
  • 《VUE配置uEditor注意事项(主要是ZeroClipboard not defined)》
  • 无果!
  • 实例化uEditor之前强行require(ZeroClipboard)仍然无果!
  • 修改ueditor.all.js源码调用ZeroClipboard之前强行require还是无果!

那么你应该看看这里

  • uEditor的引入很简单,只需要加载几个js文件,改一下配置文件的路径配置,就可以实例使用了,但是换句话说就是路径配置对uEditor无比重要,这也是为什么上面强调不要忘了路径配置最后的/,最后不带/的绝对路径跟耍流氓有什么区别。
  • 话说回来,影响项目路径配置的因素有很多,本人是基于webpack打包,webpack配置中一定不要忽略如下配置
  • 《VUE配置uEditor注意事项(主要是ZeroClipboard not defined)》
  • `

// 拷贝static目录,static目录我们作为存放第三方资源的目录,无需再次编译,直接拷贝到构建目录中

    new CopyWebpackPlugin([
        {
            from: path.resolve(__dirname, '../static'),
            to: process.env.NODE_ENV === 'production' ? config.build.assetsSubDirectory : config.dev.assetsSubDirectory,
            ignore: ['.*']
        }
    ])
  • 意思就是不要把static目录下东西给我打包成hash值js结果中,这样自然在‘/static/ueditor/’里面找不到依赖了,他们由我直接管理,webpack不要多管闲事
  • webpack此刻心情《VUE配置uEditor注意事项(主要是ZeroClipboard not defined)》
  • 还有assetsPublicPath一定要是/,《VUE配置uEditor注意事项(主要是ZeroClipboard not defined)》

这里你自己意淫加了什么‘@/static/ueditor/’前面@同理还得加什么,因为你的项目经过webpack打包时引用根路径就会统一加上@/,浏览器解析到source里的路径就变成了‘@/static/ueditor/’,同样build配置项也要保持一致。

  • 《VUE配置uEditor注意事项(主要是ZeroClipboard not defined)》

好了,废话就说到这里,该翘班了。
为了引入这个uEditor的bug曾经调试了一天,害的一周每天都要多加班2h,后面就不多解释了。
哦,不,多加一句:女装大佬们轻喷。

《VUE配置uEditor注意事项(主要是ZeroClipboard not defined)》

    原文作者:aqing
    原文地址: https://segmentfault.com/a/1190000016966347
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞