首发自 ask 社区
如果问题没有解决，请参考这篇文章进行修改。https://ask.dcloud.net.cn/article/40900
如何判断你是否收到影响？
如果你同时符合下面两种情况，你需要仔细阅读：
- 你使用
uni-app构建 web 端，也称H5端 - 在编辑器中搜索
uni-editor或者uniEditor发现有引用
如果你符合上述两条要求，请继续阅读。
问题现象
近期很多用户反馈 <uni-editor /> 组件在 H5 端不能正常使用，表现为组件点击无反应、赋值不生效、控制台有提示资源获取超时等，但之前是好的，近期突然不正常了。
经过 uni-app 团队排查，发现是在 H5 环境下，激活编辑器 editor 组件时候，如果当前环境没有相关依赖，会从 unpkg 上下载资源。
近期部分地区无法正常访问 unpkg 导致组件资源获取不到，最终导致 editor 组件不能正常运行。
我该如何解决？
editor 组件官方文档一直有相关提示，点击这里： https://uniapp.dcloud.net.cn/component/editor.html 在注意事项部分有相关提示。
但很多用户没注意看，这里做个详细的指导，后续会进一步优化相关提示。
这里提供两个方案，供不同用户使用。
方案一：自己管理 CDN 资源 推荐
阅读官方文档，可以看到，有两个 js 需要加载，这里可以下载两个 js 到 static 目录，并在 index.html(Vue 3)，或者 public/index.html(Vue2) 中在 head 之间添加 js
vue2 配合 hbuiderx 使用 editor ，demo 地址 https://gitee.com/xiaoxfa/vue2-hbuilderx-playground/tree/q%2Feditor/
<head>
<script src="/static/quill-1.3.7.min.js"></script>
<script src="/static/image-resize-3.0.1.min.js"></script>
</head>这样 editor 就可以正常使用了，代码逻辑中检测到有相关 window.Quill 变量，就不会从远程获取资源。
这种方案比较省事。如果你熟悉 npm 生态，熟悉构建流程的用户，推荐方案二。
方案二：使用 npm 相关依赖
方案一的解决思路是在 window 上进行挂载，同样，我们可以在项目入口 main.js 或者 App.vue中引用相关依赖即可。
基础代码附上，你可以按照这个基础 demo 里的代码进行测试。
https://gitcode.net/xiurensha5731/uni-app-questions/-/tree/q/editor
整体来说，在项目中添加相关依赖：
# 经过测试最新版本 1.3.7 可以运行
npm i quill@1.3.7
npm i quill-image-resize-mp在 vue3+ts 的代码中这样引用：
<script setup lang="ts">
declare global {
interface Window {
Quill: any;
}
}
// h5 依赖 quill 依赖，这里引入依赖，挂在全局避免去远程引入
// #ifdef H5
import ImageResize from "quill-image-resize-mp";
import Quill from "quill";
window.Quill = Quill;
window.ImageResize = { default: ImageResize };
// #endif
</script>这样做的好处是依赖清晰，引用透明。
问题总结
项目中谨慎使用远程 CDN，无论是国外的还是国内的，鼓励使用托管资源，使用 npm 进行管理，保证依赖清晰，引用透明，方便项目长期维护。
6 个评论
要回复文章请先登录或注册
DCloud_UNI_OttoJi (作者)
2***@qq.com
DCloud_UNI_OttoJi (作者)
w***@163.com
DCloud_UNI_OttoJi (作者)
Diligent_UI