Vditor 如何离线使用？

前言

Vditor 是一款所见即所得的浏览器端 Markdown 编辑器。

GitHub：https://github.com/Vanessa219/vditor
官网：https://b3log.org/vditor/

个人使用它有两个原因：

相比于同类型的，确实很好看，之前用过一段时间 Typora ，收费之后就没用了，效果上很类似（所见即所得）
Markdown 引擎是开源的 lute ，当我需要一个前后端相同渲染效果的引擎时，它就很不错了

基本使用就不多说了，文档很详细，功能也很全面，看看就知道了，本文是由于再离线环境下使用的过程中发现 Vditor 需要依赖外部 CDN 资源，所以踩了一些坑。

基本步骤

网络上有 Vditor 的 CDN 但无法直接拿来用，除非你是原生 HTML。如果你直接配置网络的地址到 CDN 的配置会发现路径多了一个 dist。当然，官方也支持自建 CDN，将源码放到 nginx 里面去也可以，但这样单独部署很麻烦。我还是希望打包到一起去。其实作者在 issue 里面已经说了，挺容易理解的，过程也就基本是这样。

修改配置

import Vditor from 'vditor';
import 'vditor/dist/index.css';

const vditor = ref<Vditor | null>(null);

onMounted(() => {
  vditor.value = new Vditor('vditor', {
    height: 500,
    toolbar: ['headings', 'bold', 'italic', 'strike', '|', 'line', 'quote', 'list', 'ordered-list', 'check', 'outdent', 'indent', 'code', 'inline-code', '|', 'insert-after', 'insert-before', 'undo', 'redo', 'link'],
    toolbarConfig: {
      pin: true,
    },
    preview: {
      hljs: {
        style: 'dracula'
      },
      actions: []
    },
    cache: {
      id: 'post-draft',
      enable: true,
    },
    tab: '  ',
    cdn: '', // 关键在这里，需要设置CDN为空
  });
});