uni-app editor富文本编辑器不能使用了

uni-app editor富文本编辑器不能使用了

操作步骤：

~

预期结果：

~

实际结果：

~

bug描述：

前一段时间，发现富文本编辑器不能使用了，还以为是自己不小心动了哪里代码， 游览器错误提示： GET https://unpkg.com/quill@1.3.7/dist/quill.min.js net::ERR_CONNECTION_REFUSED

后来官网找原因，发现官网的editor组件实例也是错误的：
https://hellouniapp.dcloud.net.cn/pages/component/editor/editor

uni-app 是不是砍掉这个内置组件了哦~


更多关于uni-app editor富文本编辑器不能使用了的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app editor富文本编辑器不能使用了的实战教程也可以访问 https://www.itying.com/category-93-b0.html


根据你的描述，这个问题并非由你的代码改动引起，而是由于uni-app内置的editor组件依赖的Quill.js库资源加载失败导致的。

问题原因：

  1. uni-app的editor组件确实依赖Quill.js库（版本1.3.7）
  2. 该库默认从unpkg.com的CDN加载：https://unpkg.com/quill@1.3.7/dist/quill.min.js
  3. 当unpkg.com服务不稳定或无法访问时，就会导致编辑器无法正常使用
  4. 官网示例同样依赖这个CDN资源，所以也会出现相同问题

解决方案：

方案一：本地引入Quill.js（推荐）

  1. 下载Quill.js 1.3.7版本
  2. 将quill.min.js和quill.core.css等资源文件放入项目static目录
  3. 在pages.json中配置本地资源路径：
{
  "pages": [{
    "path": "pages/editor/editor",
    "style": {
      "navigationBarTitleText": "编辑器",
      "app-plus": {
        "usingComponents": true,
        "nvueStyleCompiler": "uni-app",
        "renderer": "native",
        "distribute": {
          "plugins": {
            "editor": {
              "quill": {
                "js": "/static/quill.min.js",
                "css": "/static/quill.core.css"
              }
            }
          }
        }
      }
    }
  }]
}

方案二：使用其他CDN源 修改配置指向其他可用的CDN，如：

"quill": {
  "js": "https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js",
  "css": "https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.core.css"
}
回到顶部