登录 注册

vditor 自建 cdn 之后，基本功能是可以使用的，但是有部分功能还是会走线上的 cdn

本贴最后更新于 322 天前，其中的信息可能已经斗转星移

vditor 自建 cdn 之后，基本功能是可以使用的，但是有部分功能还是会走线上的 cdn，比如导出 pdf 功能，还是会走下面这个 cdn，会请求不到资源，导出 pdf 的功能就用不了。还有自定义按钮图标名字的问题（比如我改了上传文件功能为上传图片，结果上传图标看不到了，但是功能正常）。这种问题应该怎么解决呢？

image.png

image.png

  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React 和 Angular。

    346 引用 • 1801 回帖 • 3 关注
1 引用
自建完 cdn 后使用导出 pdf 功能 仍然有部分请求 请求的是 unpkg.com • 88250
南京 位置
1 引用
11 回帖
3
3
2
2
790 225 17 426 4 4 114

相关帖子

11 回帖
vditor 自建 cdn 之后，基本功能是可以使用的，但是有部分功能还是会走线上的 cdn

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • Vanessa •
    订阅者 付费者 MOD

    Issue #1522 · Vanessa219/vditor

    1 回复
  • qiaoguoxing •
    捐赠者 作者

    好的，我都加一下

  • qiaoguoxing • • 3 评论
    捐赠者 作者

    846c0554b335a84e7d69b8079a7644c.png

    d9f2a0e16194fef88d9fee4fd6f6e07.png

    @88250 @Vanessa 两位大佬，拉了最新源码之后，本地自建 cdn，导出 pdf 还是走的 unpkg。

    没有问题，你需要运行一下 npm run build
    Vanessa •
    我 build 重新打 dist 了，缓存也清了几次了，还把版本升到最新了，不知道为啥还是不行，有空我捋捋源码，暂时把导出隐藏了。
    qiaoguoxing •
    @Vanessa 我看文档里面给的预览的配置是 Vditor.preview,我用的是 import VditorPreview from 'vditor/dist/method.min'，用的 VditorPreview.preview(),就是预览跟编辑是分开的方法，里面分别配置了一套 option，但是都写了 cdn，不知道是不是这个原因导致的？
    qiaoguoxing •
  • qiaoguoxing • • 17 评论
    捐赠者 作者

    image.png

    image.png

    编辑写在我自己的 initEdit()方法里面的，配置了 option 的本地 cdn。

    image.png

    image.png

    预览又写在了我的 initView()方法里面，也配了本地 cdn。

    @88250 @Vanessa 是不是我这种操作不对 😂

    点导出 pdf，只有 lute 那一个还是线上 cdn，其他导出的时候请求的 css 资源看都走本地 cdn 了。
    qiaoguoxing •
    @qiaoguoxing 导出需要去 github 上面自己编译最新代码，还没有发布
    Vanessa •
    @Vanessa 我是在 github 的 master 分支拉了最新的代码，用最新的代码在本地 npm run build 打包的的，然后把 dist 文件放到我项目里面的，还有啥编译操作吗？
    qiaoguoxing •
    @qiaoguoxing 这样就可以了。我在本地这样操作导出 pdf 是没有 unpkg 的请求了。
    Vanessa •
    @Vanessa 有点奇怪了，我这只有 lute 这个文件一直走 unpkg，有空我再研究研究。
    qiaoguoxing •
    @qiaoguoxing _lutePath 是不是设置过这个参数
    Vanessa •
    @Vanessa 没有，就是完全按照之前发的 Issue #1522 · Vanessa219/vditor 这个来配的，其他就是把 npm 安装的 vditor 版本升到最新的"vditor": "^3.9.7",别的什么都没配了。
    qiaoguoxing •
    @qiaoguoxing 要按照上面的 “导出需要去 github 上面自己编译最新代码，还没有发布”
    Vanessa •
    @Vanessa 额，上面说的“我是在 github 的 master 分支拉了最新的代码，用最新的代码在本地 npm run build 打包的的，然后把 dist 文件放到我项目里面的，还有啥编译操作吗？”已经拉最新源码，重打 dist 放到本地了。
    qiaoguoxing •
    @Vanessa 这几天有点忙，暂时把导出功能去掉了，不影响项目，麻烦大佬看了，感谢。。等有时间，我看看源码，找找原因，正好学习学习。。
    qiaoguoxing •
    @qiaoguoxing 看你说的是升级到 3.9.7。我看了下最新代码本地运行后是没有问题的，你有空再看看吧，有什么问题再 at 我就可以了。
    Vanessa •
    @Vanessa 好的，感谢大佬！
    qiaoguoxing •
    @Vanessa 大佬我用 npm 也是吧 vditor 安装到了 3.9.7 版本，GitHub 也是拉取的最新代码，cdn 那些配置的东西也都配置完了。在初始化组件时，请求都是走的本地的，但是在导出 PDF 时，lute.min.js、zh_CN.js、ant.js、light.css、github.css 这些请求还是走的线上的
    north999 •
    @north999 等明天发 3.9.8
    Vanessa •
    @Vanessa V 姐 我换成 3.9.8 版本后还是出现之前那些问题 貌似没有解决
    north999 •
    @north999 是导出 PDF 还有 unpkg 嘛？配置了没有？ 具体操作步骤和现象是？
    Vanessa •
    @Vanessa 对 导出 pdf 还是请求的 unpkg
    north999 •
  • north999 •

    这是导出 pdf 的请求

    b72a6f8315545676c2d8e098bd7794f.png

    6e16391b29d733fea546f5c9bd60190.png

    cdn 配置

    image.png

    之前用的旧版本的 vditor 没有问题 现在换上 3.9.8 版本的出现了问题 就是上传音频文件时报错了

    image.png

  • north999 •

    使用新版本的 vditor 导出 pdf 功能还是请求的线上

  • north999 •

    @Vanessa

    1 回复
  • Vanessa • • 2 评论
    订阅者 付费者 MOD

    我这里是正常的，实在不行的话只能在 https://github.com/Vanessa219/vditor/blob/8763b61b9d9d15f8b916e86882c696747deb63c2/src/ts/export/index.ts#L37 打断点你们单步调试一下

    viditor 预览模式，支持点击图片查看大图功能吗？
    Ljp0605 •
    @Ljp0605 单击图片即可
    Vanessa •
  • lujiangbo • 
    
# vditor 删除npm中的安装包 拉取最新代码编辑后打包 放到common/vditor目录下

    导出 prd 的时候还是采用的线上的 cdn，访问不到 lute.min.js 导致报错不能正常显示
    https://gitee.com/vanessali/vditor
    src/ts/export/index.ts 中的 exportPDF 方法
    Vditor.preview 的第三个配置参数中增加如下代码：
    cdn: "${vditor.options.cdn}",
    theme: {
    current: "${vditor.options.preview.theme.current || 'light'}",
    path: "$${vditor.options.cdn}/dist/css/content-theme"
    },
    emojiPath: "${vditor.options.cdn}/dist/images/emoji",
    打包后复制其 package.json 和 dist 到同一个文件夹下即可，为了压缩包提把 dist 目录下的 js 和 ts 都删除
    为了导出 prd，重新在拉起线上代码，在导出的时候重新修改了代码才让其导出预览采用了自定义的 cdn

    
![Alt text](image.png)
  • lujiangbo •

    image.png

  • Praise •

    不用自己下载，全局替换 unpkg.com 为 s4.zstatic.net/npm 就可以解决了

请输入回帖内容 ...
qiaoguoxing
南京
回帖
28
 帖子
3
 积分
1998

近期热议

推荐标签 标签

  • IDEA

    IDEA 全称 IntelliJ IDEA，是一款 Java 语言开发的集成环境，在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品，这家公司总部位于捷克共和国的首都布拉格，开发人员以严谨著称的东欧程序员为主。

    180 引用 • 400 回帖 • 2 关注
  • 负能量

    上帝为你关上了一扇门，然后就去睡觉了....努力不一定能成功，但不努力一定很轻松 (° ー °〃)

    88 引用 • 1235 回帖 • 408 关注
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”，在线用户由 1999 年的 2 人（马化腾和张志东）到现在已经发展到上亿用户了，在线人数超过一亿，是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 84 关注
  • 脑图

    脑图又叫思维导图，是表达发散性思维的有效图形思维工具 ，它简单却又很有效，是一种实用性的思维工具。

    25 引用 • 83 回帖
  • OpenStack

    OpenStack 是一个云操作系统，通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成，同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 2 关注
  • 正则表达式

    正则表达式（Regular Expression）使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖
  • HBase

    HBase 是一个分布式的、面向列的开源数据库，该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable：一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样，HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 71 关注
  • Docker

    Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，然后发布到任何流行的操作系统上。容器完全使用沙箱机制，几乎没有性能开销，可以很容易地在机器和数据中心中运行。

    490 引用 • 916 回帖 • 1 关注
  • Scala

    Scala 是一门多范式的编程语言，集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 124 关注
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发，是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 663 关注
  • SMTP

    SMTP（Simple Mail Transfer Protocol）即简单邮件传输协议，它是一组用于由源地址到目的地址传送邮件的规则，由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇，它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 612 关注
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 733 关注
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架，基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 387 关注
  • 禅道

    禅道是一款国产的开源项目管理软件，她的核心管理思想基于敏捷方法 scrum，内置了产品管理和项目管理，同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能，在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来，完整地覆盖了项目管理的核心流程。

    6 引用 • 15 回帖 • 127 关注
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台，其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 47 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构，这是有关软件整体结构与组件的抽象描述，用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    142 引用 • 442 回帖
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息，资讯有时效性和地域性。

    55 引用 • 85 回帖
  • 安全

    安全永远都不是一个小问题。

    199 引用 • 816 回帖 • 1 关注
  • 30Seconds

    📙 前端知识精选集，包含 HTML、CSS、JavaScript、React、Node、安全等方面，每天仅需 30 秒。

    • 精选常见面试题，帮助您准备下一次面试
    • 精选常见交互，帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段，帮助你获取最佳实践
    • 精选常见代码集，帮助您提高打码效率
    • 整理前端界的最新资讯，邀您一同探索新世界
    488 引用 • 383 回帖 • 6 关注
  • 新人

    让我们欢迎这对新人。哦，不好意思说错了，让我们欢迎这位新人！
    新手上路，请谨慎驾驶！

    52 引用 • 228 回帖 • 1 关注
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年，是中国的 IT 社区和服务平台，为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务，满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖 • 2 关注
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架，它对 JDBC 进行了非常轻量级的对象封装，使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 706 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架，使用 Node.js 编写。

    21 引用 • 140 回帖 • 5 关注
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现，服务器端用 Erlang 语言编写，支持多种语言客户端，如：Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息，在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 366 关注
  • 七牛云

    七牛云是国内领先的企业级公有云服务商，致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景，七牛先后推出了对象存储，融合 CDN 加速，数据通用处理，内容反垃圾服务，以及直播云服务等。

    26 引用 • 222 回帖 • 164 关注
  • Google

    Google（Google Inc.，NASDAQ：GOOG）是一家美国上市公司（公有股份公司），于 1998 年 9 月 7 日以私有股份公司的形式创立，设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”，它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎，它提供了简单易用的免费服务。不作恶（Don't be evil）是谷歌公司的一项非正式的公司口号。

    49 引用 • 192 回帖

最新标签