登录 注册

Vditor 如何离线使用？

本贴最后更新于 1620 天前，其中的信息可能已经时移世异

如何正确的配置为本地使用呢？不想用 CDN

虽然第一次打开之后，之后可以离线使用。我是 npm 安装好了想单纯在本地使用

看了下 cdn 配置有点晕 【https://hacpai.com/article/1549638745630#CDN-%e5%88%87%e6%8d%a2】，有大佬能详细指点下吗？

正常使用状态下仅尝试修改了配置 cdn:'..'，然后白屏了，F12 调试发现没有加载 css 😂

  • Vditor

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

    358 引用 • 1831 回帖 • 1 关注
  • Q&A

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

    8824 引用 • 40218 回帖 • 132 关注
北京 位置
20 悬赏
5 回帖
3.2k 353 793 568 2 270 37 4 19 1.2k

相关帖子

5 回帖
Vditor 如何离线使用？

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • hunterzhao • • 1

    我用的就是本地的，完全可以用，具体是这个样子的：

    1. 首先下载源码，git clone https://github.com/Vanessa219/vditor.git

    2. 然后进入目录，执行：npm install

    3. 然后执行：npm run build

    4. 在外面新建个文件夹，将 dist 文件夹整个拷贝出来。比如我新建目录 vditor，拷贝好之后 vditor 目录下有个 dist 目录，/vditor/dist/（dist 不能改名字哦）。

    5. 这个时候就可以引用了，我的 web 服务的静态资源目录是 res，所以设置：cdn:'/res/vditor'

    6. css 和 js 引用是这个样子的：

      <link rel="stylesheet" href="/res/vditor/dist/index.css"/>
<script src="/res/vditor/dist/index.min.js"></script>

    7. 你试试吧，多多交流 ～

    2 回复
  • seawenzhu •

    把 dist 目录托管在自己项目的部署的根目录里， cdn 配置 location.origin 就行了

  • jerr •

    这样设置以后，样式表还是用的 CND，该怎么设置这个样式啊

    image.png

  • LiLiiiiiii •

    请问这个怎么解决的嘞？

  • faylpf •

    @3.9.8 版本，源码安装打包方式修改为：pnpm

    step1: npm install -g pnpm

    step2: pnpm install

    step3: pnpm run build

hello1024
北京
回帖
2
 帖子
1
 积分
606

近期热议

推荐标签 标签

  • Q&A

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

    8823 引用 • 40217 回帖 • 132 关注
  • 印象笔记
    3 引用 • 16 回帖 • 2 关注
  • danl
    • 155 关注
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug（漏洞）。

    76 引用 • 1741 回帖
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    578 引用 • 3534 回帖
  • Markdown

    Markdown 是一种轻量级标记语言，用户可使用纯文本编辑器来排版文档，最终通过 Markdown 引擎将文档转换为所需格式（比如 HTML、PDF 等）。

    169 引用 • 1525 回帖
  • GraphQL

    GraphQL 是一个用于 API 的查询语言，是一个使用基于类型系统来执行查询的服务端运行时（类型系统由你的数据定义）。GraphQL 并没有和任何特定数据库或者存储引擎绑定，而是依靠你现有的代码和数据支撑。

    4 引用 • 3 回帖 • 10 关注
  • OpenCV
    15 引用 • 36 回帖
  • Bootstrap

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

    18 引用 • 33 回帖 • 659 关注
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念，推广开源项目，为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • 代码片段

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

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

    104 引用 • 725 回帖
  • abitmean

    有点意思就行了

    • 32 关注
  • 国际化

    i18n（其来源是英文单词 internationalization 的首末字符 i 和 n，18 为中间的字符数）是“国际化”的简称。对程序来说，国际化是指在不修改代码的情况下，能根据不同语言及地区显示相应的界面。

    8 引用 • 26 回帖
  • SVN

    SVN 是 Subversion 的简称，是一个开放源代码的版本控制系统，相较于 RCS、CVS，它采用了分支管理系统，它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 689 关注
  • 小说

    小说是以刻画人物形象为中心，通过完整的故事情节和环境描写来反映社会生活的文学体裁。

    29 引用 • 108 回帖
  • 坑

    一些有用的避坑指南。

    69 引用 • 93 回帖
  • LeetCode

    LeetCode（力扣）是一个全球极客挚爱的高质量技术成长平台，想要学习和提升专业能力从这里开始，充足技术干货等你来啃，轻松拿下 Dream Offer！

    209 引用 • 72 回帖 • 1 关注
  • 爬虫

    网络爬虫（Spider、Crawler），是一种按照一定的规则，自动地抓取万维网信息的程序。

    106 引用 • 275 回帖
  • B3log

    B3log 是一个开源组织，名字来源于“Bulletin Board Blog”缩写，目标是将独立博客与论坛结合，形成一种新的网络社区体验，详细请看 B3log 构思。目前 B3log 已经开源了多款产品：Sym、Solo、Vditor 和 思源笔记。

    1063 引用 • 3455 回帖 • 189 关注
  • 百度

    百度（Nasdaq：BIDU）是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村，致力于向人们提供“简单，可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”，象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 144 关注
  • PHP

    PHP（Hypertext Preprocessor）是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点，主要适用于 Web 开发领域，据说是世界上最好的编程语言。

    179 引用 • 407 回帖 • 481 关注
  • 书籍

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

    78 引用 • 391 回帖
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    8 引用 • 40 回帖
  • wolai

    我来 wolai：不仅仅是未来的云端笔记！

    2 引用 • 14 回帖
  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    6 引用 • 63 回帖
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 269 回帖 • 11 关注
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端，也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖

最新标签