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

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

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

image.png

image.png

  • Vditor

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

    367 引用 • 1842 回帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 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
  • 其他回帖
  • north999
    1 回复
  • 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
  • lujiangbo via macOS
    # 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)
  • 查看全部回帖

推荐标签 标签

  • App

    App(应用程序,Application 的缩写)一般指手机软件。

    91 引用 • 384 回帖 • 1 关注
  • 阿里云

    阿里云是阿里巴巴集团旗下公司,是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务,以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    84 引用 • 324 回帖
  • Visio
    1 引用 • 2 回帖
  • gRpc
    11 引用 • 9 回帖 • 93 关注
  • 微服务

    微服务架构是一种架构模式,它提倡将单一应用划分成一组小的服务。服务之间互相协调,互相配合,为用户提供最终价值。每个服务运行在独立的进程中。服务于服务之间才用轻量级的通信机制互相沟通。每个服务都围绕着具体业务构建,能够被独立的部署。

    96 引用 • 155 回帖
  • 外包

    有空闲时间是接外包好呢还是学习好呢?

    26 引用 • 233 回帖
  • OpenShift

    红帽提供的 PaaS 云,支持多种编程语言,为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 656 关注
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成,还支持通过插件进行扩展。

    10 引用 • 5 回帖
  • Bootstrap

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

    18 引用 • 33 回帖 • 645 关注
  • Vditor

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

    367 引用 • 1842 回帖
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流,分享无限上传的图片,发布链接和视频,更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 442 关注
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖 • 1 关注
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    9584 引用 • 43591 回帖 • 97 关注
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展,它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖
  • ngrok

    ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 649 关注
  • 宕机

    宕机,多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态,也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态,也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 76 关注
  • 电影

    这是一个不能说的秘密。

    122 引用 • 608 回帖
  • CSDN

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

    14 引用 • 155 回帖
  • Access
    1 引用 • 3 回帖 • 2 关注
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    142 引用 • 954 回帖 • 2 关注
  • 脑图

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

    31 引用 • 97 回帖
  • 书籍

    宋真宗赵恒曾经说过:“书中自有黄金屋,书中自有颜如玉。”

    78 引用 • 396 回帖
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 647 关注
  • Flutter

    Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作,它正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖
  • 尊园地产

    昆明尊园房地产经纪有限公司,即:Kunming Zunyuan Property Agency Company Limited(简称“尊园地产”)于 2007 年 6 月开始筹备,2007 年 8 月 18 日正式成立,注册资本 200 万元,公司性质为股份经纪有限公司,主营业务为:代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 786 关注
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议,它实现了浏览器与服务器之间的全双工通信(full-duplex)。

    48 引用 • 206 回帖 • 295 关注
  • Swagger

    Swagger 是一款非常流行的 API 开发工具,它遵循 OpenAPI Specification(这是一种通用的、和编程语言无关的 API 描述规范)。Swagger 贯穿整个 API 生命周期,如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖