Vditor 的离线使用(集成原生 JS 小案例,给迷茫的新手朋友们,我看官方文档也迷茫了好久)

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

Vditor 的离线使用

Vditor 是个很好的开源编辑器。但其实写这个的目的还是因为官方文档太晦涩难懂了,原生 html 的调用测试没有很好的例子,对于新手不怎么友好,我研究了一整天,才勉强搞出来。特此记录,供后人学习和快速使用。

在线测试

开启了 Gitee 的 Pages 服务,你也可以在线测试使用哦。

地址:http://xueshanlinghu.gitee.io/vditor-offline/

小小案例项目地址

直接调用 CDN 源码

index.html 中的 <!-- 引用 CDN --> 的两行的注释去掉,再将 <!-- 引用本地 js 和 css --> 这两行内容注释起来即可。建议使用 live-server 来本地测试,后续会讲。

完全离线使用 Vditor

# 下载最新的Vditor源码
git clone https://github.com/Vanessa219/vditor.git vditor
# 如果通过 Github 下载过慢你可以考虑用 Gitee 的高速源下载,二选一即可
git clone https://gitee.com/mirrors/Vditor.git vditor
# 进入目录
cd vditor
# 依赖包安装
npm install
# 构建文件
npm run build
# 完成后会在目录下生成一个 dist 文件夹,将该文件夹复制到项目目录中(本项目中已包含)
# 后续可以进行本地测试

使用 live-server 本地测试

# 全局安装
npm install -g live-server
# 然后进入项目根目录,运行下述
live-server
# 这样就会启动一个本地服务器,默认端口为8080,就可以进行测试了,运行期间,对项目文件夹的文件的任何改动会即刻加载

最后感谢一下几位朋友的回答:

@yueqianzhang @hunterzhao

  • Vditor

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

    311 引用 • 1666 回帖 • 2 关注

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 感谢 LZ,我也是这样使用的,但是可以看到控制台暴出的异常信息,还是有些功能在访问远程的 JS,应该要向官方文档中说的对 CDN 进行设置才行。如下图:

    1.png

    1 回复
  • 其他回帖
  • gztrljh

    是啊,这个渲染一大堆报错,不知道是怎么回事。。